Redux+RxΛ׆༻ͨ͠ΞϓϦΞʔ ΩςΫνϟ ɹ CA.swi! #5 2018/01/25@גࣜձࣾαΠόʔΤʔδΣϯτ Yohei Suginami ( @susieyy )

Profile — Yohei Sugigami — susieyy — Twitter / Qiita / Github — New App Development Specialization — Clients — Folio.inc — New app developer — Wantedly.inc — Technical advisor

ɹ ɹ Reduxͱ͸ Reduxͷ3ͭͷݪଇ(Redux Three Principles) ͱ ୯ํ޲ͷσʔλϑϩʔ(Unidirectional Data Flow)

Single source of truth ɹ State is read-only ɹ Mutations are wri!en as pure functions

Single source of truth / ৴པͰ͖Δ།Ұͷঢ়ଶ ΞϓϦશମͷঢ়ଶΛ̍ͭͷΦϒδΣΫτπϦʔͰදݱ

State is read-only / ঢ়ଶ͸Πϛϡʔλϒϧ มߋ͢Δʹ͸ඞͣΞΫγϣϯΛൃߦ͢Δ

Mutations are wri!en as pure functions / ७ਮؔ਺ ঢ়ଶมߋ͸෭࡞༻͕ͳ͍७ਮؔ਺Λ༻͍ɺঢ়ଶΛ௚઀มߋͤ ͣɺ৽͍͠ঢ়ଶΛ࡞ͬͯฦ͢

ɹ ɹ ୯ํ޲ͷσʔλϑϩʔ Unidirectional Data Flow

No content

POINT Viewͱঢ়ଶͷ׬શͳΔ෼཭ ViewͷϩδοΫ͸ͦͷॠؒͷΞϓϦ಺ͷ͢΂ͯͷঢ়ଶ͕ҰҙͰ ͋Δ͜ͱΛอূ͞ΕΔ ʢ ͦͷॠؒͷঢ়ଶʹରͯ͠ඇಉظͷհ ೖ͕ͳ͍ ʣ ඇಉظ࣮ߦதͷதؒঢ়ଶ΋ҙࣝ͢Δඞཁ͕ͳ͍ɺγϯάϧϝΠ ϯεϨου͚ͩͰಈ࡞͍ͯ͠ΔΑ͏ͳִؒͰϩδοΫ͕ॻ͚Δ

POINT Πϛϡʔλϒϧͱ७ਮؔ਺Λ׆༻ͯ͠పఈతʹ෭࡞༻ͷഉআ ʢ෼཭ʣʹప͍ͯ͠Δ͜ͱ͕ɺଞͷMVC,MVVM,CleanͳͲͷ ΞʔΩςΫνϟͱҟͳΔઃܭࢥ૝Ͱ͋ΓɺγϯϓϧͰݎ࿚Ͱ׌ ͭՄಡੑͷߴ͍ίʔσΟϯάΛՄೳͱ͢Δݯઘ Πϛϡʔλϒϧ͕ѻ͑ͯؔ਺ܕࢦ޲ͳSwiftͱ΋૬ੑ͕Α͍

POINT ༧ଌՄೳͳܗͰίʔυΛએݴతʹߏ଄Խ͢Δ͜ͱ - ༧ଌՄೳ - ঢ়ଶΛҰݩతʹ؅ཧ - ঢ়ଶมԽ͸γʔέϯγϟϧ - ෭࡞༻ͱͷ෼཭(ඇಉظతมԽͷഉআ) - એݴత - ঢ়ଶมԽͷىҼ͕໌ࣔత ʢ ActionΛDispatch ʣ - ঢ়ଶมԽ͸७ਮؔ਺

ReduxΛͳʹͰ࣮૷͢Δ͔ — ຊՈReduxͷεςοϓ਺͸318ͱඇৗʹগͳ͍ — ࣮૷Λࢀߟʹࣗ෼ͰϙʔςΟϯά͢Δ͜ͱ΋Մೳͳ෼ྔ — ϥΠϒϥϦ΋͍͔࣮ͭ͘૷͞Ε͍ͯΔͷͰݕ౼ͯ͠ΈΔ

ReduxܥϥΠϒϥϦ — ReSwift ˒4,247 — ReactiveReSwift ˒71 — KATANA ˒ 1,602 — ReduxKit ˒583 — Reactor ˒129

FluxܥϥΠϒϥϦ — Dispatch ˒239 — SwiftFlux ˒212 — FluxWithRxSwiftSample ˒109 — FluxxKit ˒33

ݕ౼݁Ռ — ReSwift͕Ұ൪༗໊ — ؔ਺΍ΫϩʔδϟʔΛத৺ʹઃܭ͞Ε͓ͯΓɺ࣮૷͕ͱͯ ΋៉ྷ — ϦϦʔεස౓΋΄ͲΑ͘ɺISSUE΋׆ൃ

ɹ ɹ ReSwi!ͱ͸ ReSwi!ͷ࣮૷ͱར༻ྫΛݟͯΈΔ

State Action Reducer Dispatch ActionCreator

No content

State protocol StateType { }

State / e.g. struct AppState: ReSwift.StateType { var timelineState = TimelineState() var userProfileState = UserProfileState() } struct TimelineState: ReSwift.StateType { var tweets: [Tweet] var response: [Tweet] }

State — Structͷ໦ߏ଄ — ֤Struct͸ReSwi!.StateTypeϓϩτίϧʹ४ڌ͢Δ — ׳ྫతʹҰ൪্૚ͷঢ়ଶΛද͢StructΛAppStateͱ͢Δ

No content

Action protocol Action { }

Action / e.g. extension TimelineState { enum Action: ReSwift.Action { case requestSuccess(response: [Tweet]) case requestState(fetching: Bool) case requestError(error: Error) } }

Action — ReSwi!.Actionϓϩτίϧʹ४ڌ͍ͯ͠Ε͹ɺStructͰ ΋ɺEnumͰ΋Α͍ — ॲཧΛ༗͠ͳ͍ͨͩͷσʔλ — ReducerͰͲ͏͍͏ॲཧΛ͍͔ͨ͠ͷछྨͱͦͷΠϯϓο τσʔλʹͳΔ

No content

Reducer typealias Reducer = (action: Action, state: ReducerStateType?) -> ReducerStateType

Reducer / e.g extension TimelineState { public static func reducer(action: ReSwift.Action, state: TimelineState?) -> TimelineState { var state = state ?? TimelineState() guard let action = action as? TimelineState.Action else { return state } switch action { case let .requestState(fetching): state.fetching = fetching state.error = nil case let .requestSuccess(response): state.fetching = false state.response = response state.dataSourceElements = DataSourceElements(response.map({ DiffableWrap($0) })) case let .requestError(error): state.fetching = false state.error = error } return state } }

Reducer — ReduxͰ͸ঢ়ଶมߋͰ͖Δͷ͸Reducer͚ͩͱ͍͏੍໿ — Reducer͸ (state, action) => state Λຬͨ͢ঢ়ଶΛ࣋ͨ ͳ͍;ͭ͏ͷؔ਺ʢ७ਮؔ਺ʣͰͳ͚Ε͹ͳΒͳ͍

Reducer / Initialization func appReduce(action: ReSwift.Action, state: AppState?) -> AppState { var state = state ?? AppState() state.timelineState = TimelineState.reducer( action: action, state: state.timelineState) state.userProfile = UserProfileState.reducer( action: action, state: state.userProfile) return state } var appStore = ReSwift.Store( reducer: appReduce, state: nil, middleware: [])

Reducer / Initialization — ׳ྫతʹҰ൪্૚ͷঢ়ଶΛද͢StructΛappReduceͱ͢Δ — appReduceΛى఺ʹɺԼҐͷReducerʹActionΛϒϩʔυ Ωϟετ͢Δ

No content

Store open class Store: ReSwift.StoreType { var state: State! { get } private var reducer: Reducer open func dispatch(_ action: Action) { ... } open func subscribe(_ subscriber: S) { ... } open func unsubscribe(_ subscriber: AnyStoreSubscriber) { ... } ... }

Store — StateͱReducerΛอ࣋͢Δγϯάϧτϯ — ActionͷσΟεύονϝιουΛ༗͢Δ — StateͷαϒεΫϥΠϒϝιουΛ༗͢Δ

No content

Dispatch / e.g. let action = TimelineState.Action.requestState(fetching: true) appStore.dispatch(action)

Dispatch — ViewଆͰActionͷΠϯελϯεΛ࡞੒͠ɺStoreͷ DispatchϝιουΛίʔϧ͢Δ

No content

ActionCreator typealias ActionCreator = (state: ReSwift.State, store: ReSwift.StoreType) -> ReSwift.Action?

ActionCreator — DispatchՄೳͳؔ਺ͰActionΛฦ͢ — ActionCreatorؔ਺಺Ͱ͸StateʹΞΫηεՄೳͰɺState ΛՃ޻ͯ͠ActionΛ࡞੒͢Δ༻్ʹར༻Ͱ͖Δ — ActionCreatorؔ਺಺Ͱ͸StoreʹΞΫηεՄೳͰɺ DispatchϝιουΛίʔϧ͢Δ͜ͱ΋Ͱ͖Δ

ɹ ɹ ReSwi! Rx׆༻ฤ ෭࡞༻ʢඇಉظ௨৴ʣ/ ViewDataBinding

෭࡞༻ʢඇಉظ௨৴ʣ/ Asynchronous Operations ReSwi!ͷREADMEʹΑΔඇಉظ௨৴ͷྫ ActionCreator಺Ͱ෭࡞༻ʢඇಉظ௨৴ʣΛߦ͍ͬͯΔ func fetchGitHubRepositories(state: State, store: Store) -> Action? { guard case let .LoggedIn(configuration) = state.authenticationState.loggedInState else { return nil } Octokit(configuration).repositories { response in dispatch_async(dispatch_get_main_queue()) { store.dispatch(SetRepostories(repositories: response)) } } return nil }

෭࡞༻ʢඇಉظ௨৴ʣ/ Asynchronous Operations — ActionCreatorؔ਺͕७ਮؔ਺Ͱ͸ͳ͘ͳΔ — ؔ਺಺ʹ෭࡞༻ʢඇಉظ௨৴ʣ͕͋Δͱςετ͕͠ʹ͍͘ — ඒ͘͠ͳ͍(ݸਓͷײ૝Ͱ͢) — ͱ͸͍͑ɺReducer͸७ਮؔ਺Ͱ෭࡞༻Λڐ༰͠ͳ͍ͷ ͰɺReducerʹ΋هड़Ͱ͖ͳ͍

ɹ ɹ Redux(JS)Ͱ͸ MiddlewareͰ෭࡞༻(ඇಉظॲཧ)Λѻ͏

No content

Middleware public typealias DispatchFunction = (Action) -> Void public typealias Middleware = ( @escaping DispatchFunction, @escaping () -> State? ) -> (@escaping DispatchFunction) -> DispatchFunction

Middleware / e.g. let loggingMiddleware: ReSwift.Middleware = { dispatch, getState in return { next in return { action in logger.info("! [Action] \(action)") return next(action) } } var appStore = Store( reducer: appReduce, state: nil, middleware: [loggingMiddleware] )

ɹ ɹ Redux(JS)ͷ ඇಉظ༻Middlewareͨͪ

refs. Redux Middleware ɹ redux-thunk redux-sage redux-promise

Redux thunkͷιʔείʔυʢશྔʣ function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next => action => { if (typeof action === 'function') { return action(dispatch, getState, extraArgument); } return next(action); }; } const thunk = createThunkMiddleware(); thunk.withExtraArgument = createThunkMiddleware; export default thunk;

ɹ ɹ ;Ή;Ή!

ɹ ɹ RxSwi! ׆༻ͯ͠ඇಉظॲཧΛMiddlewareʹԡ͠ࠐΉ

rxThunkMiddleware struct SingleAction: ReSwift.Action { public let single: Single public let disposeBag: DisposeBag } let rxThunkMiddleware: ReSwift.Middleware = { dispatch, getState in return { next in return { action in if let action = action as? SingleAction { action.single .observeOn(MainScheduler.instance) .subscribe(onSuccess: { next($0) }) .disposed(by: action.disposeBag) } else { return next(action) } } } }

rxThunkMiddleware / e.g. func requstAsyncCreator(maxID: String) -> Store.ActionCreator { return { (state: AppState, store: Store) in if state.timelineState.fetching { return nil } let s = TwitterManager.shared.timeline(maxID: maxID) .map { return Timeline.Action.requestSuccess(response: $0) } .catchError { let action = Timeline.Action.requestError(error: $0) return Single.just(action) } return SingleAction(single: s, disposeBag: state.timelineState.requestDisposeBag) } }

ɹ ɹ Testability

ɹ ɹ Reduxͷੈք͸Πϛϡʔλϒϧ ७ਮؔ਺ɺ෭࡞༻ͷΈͰߏங͞ΕΔ

— Πϛϡʔλϒϧ͸ෆม — ActionʢΠϯϓοτύϥϝʔλʔʣɺStateʢσʔλʣ — ७ਮؔ਺͸ςετ͕༰қ — ೚ҙͷΠϯϓοτʹରͯ͠Ξ΢τϓοτ͕Ұҙʹܾ·Δ — ActionCreatorͱReducer — ෭࡞༻͸ςετ͕ෳࡶ — Middlewareͷ෦෼͸ςετ࣌ʹελϒʹࠩ͠ସ͑

No content

ɹ ɹ DIෆཁ! Dependency Injection

ɹ ɹ ViewDataBinding

ɹ ɹ ReSwi!#subscribe

override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) store.subscribe(self) { subcription in subcription.select { state in state.repositories } } } override func viewWillDisappear(animated: Bool) { super.viewWillDisappear(animated) store.unsubscribe(self) } func newState(state: Response<[Repository]>?) { if case let .Success(repositories) = state { dataSource?.array = repositories tableView.reloadData() } }

ɹ ɹ RxSwi! ReSwi!.StoreΛRxSwi!.Variableʹม׵

let rxReduxStore = RxReduxStore(store: appStore) public class RxReduxStore: StoreSubscriber where AppStateType: StateType { public lazy var stateObservable: Observable = { return self.stateVariable.asObservable().observeOn(MainScheduler.instance) .shareReplayLatestWhileConnected() }() public var state: AppStateType { return stateVariable.value } private let stateVariable: Variable private let store: Store public init(store: Store) { self.store = store self.stateVariable = Variable(store.state) self.store.subscribe(self) } deinit { self.store.unsubscribe(self) } public func newState(state: AppStateType) { self.stateVariable.value = state } public func dispatch(_ action: Action) { store.dispatch(action) } public func dispatch(_ actionCreatorProvider: @escaping (AppStateType, ReSwift.Store) -> Action?) { store.dispatch(actionCreatorProvider) } }

class TimeLineViewController: UIViewController { fileprivate let disposeBag = DisposeBag() fileprivate let rxReduxStore: RxReduxStore init(_ rxReduxStore: RxReduxStore) { self.rxReduxStore = rxReduxStore super.init(nibName: nil, bundle: nil) } override func viewDidLoad() { super.viewDidLoad() rxReduxStore.stateObservable .map { $0.timelineState.dataSourceElements } .bind(to: adapter.rx.items(dataSource: dataSource)) .disposed(by: disposeBag) rxReduxStore.stateObservable .map { $0.timelineState.fetching } .distinctUntilChanged() .bind(to: loadingView.rx.fetching) .disposed(by: disposeBag) } }

ɹ ɹ Viewͷࠩ෼ߋ৽

No content

ɹ ɹ ReactͰ͸

ɹ ɹ Virtual DOM

No content

ɹ ɹ iOSͰ͸

ɹ ɹ IGListKit1 1 https://github.com/Instagram/IGListKit

ɹ ɹ σʔλࠩ෼ΞϧΰϦζϜʹΑΔߴ଎ࠩ෼ߋ৽

ɹ ɹ ίϯϙʔωϯτࢦ޲Ͱଟ༷ͳViewΛѻ͑Δ

No content

— UICollectionViewΛϕʔεʹͰ͖͍ͯΔ — σʔλ͸͍ΖΜͳܕͷཁૉΛؚΉ̍࣍ݩ഑ྻ — σʔλͷཁૉͷܕͰίϯϙʔωϯτΛ෼ذ͢Δ — σʔλͷཁૉ͸ൺֱతՄೳͳͨΊʹIGListKitͷϓϩτίϧ ʹ४ڌ͢Δ(EquitableΈ͍ͨͳ΋ͷ) — ObjCͳͱ͜Ζ͕൵͍͠! — ϓϩτίϧ४ڌͷͨΊʹNSObjectΛܧঝ͕ඞཁ

final class TimeLineViewController: UIViewController { fileprivate let dataSource = DataSource() fileprivate lazy var adapter: ListAdapter = ListAdapter(updater: ListAdapterUpdater(), viewController: self) fileprivate let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout()) override func viewDidLoad() { super.viewDidLoad() view.addSubview(collectionView) adapter.collectionView = collectionView adapter.rx .setDataSource(dataSource) .disposed(by: disposeBag) rxReduxStore.stateObservable .map { $0.timelineState.dataSourceElements } .bind(to: adapter.rx.items(dataSource: dataSource)) .disposed(by: disposeBag) } } extension TimeLineViewController { fileprivate final class DataSource: AdapterDataSource { override func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController { switch object { case let o as DiffableWrap: return TweetsSectionController(o) case let o as DiffableWrap<[RecommendUser]>: return RecommendUsersSectionController(o) } } } }

RxDatasource — https://github.com/RxSwiftCommunity/RxDataSources — O(N) algorithm for calculating differences — the algorithm has the assumption that all sections and items are unique so there is no ambiguity — in case there is ambiguity, fallbacks automagically on non animated refresh

No content

ɹ ɹ One more thing !

ɹ ɹ Redux͸Debug͕͠΍͍͢

ɹ ɹ ReduxDevToolsͰঢ়ଶͷϞχλϦϯά

ɹ ɹ DEMO

Conclusion ɹ ɹ ReduxΞʔΩςΫνϟྑ͍Α!