ReactorKitΛ࣮ઓ౤ೖͯ͠Έͯ ReactorKit Meetup Japan 18/06/28

ੁݪ ༞ @yusuga_

• ߹ಉձࣾϐίε • ࡳຈ • 3ਓ: iOS / Web։ൃ / WebσβΠφ • Ҋ݅ืूதʂ

No content

ReactorKitΛ࣮ઓ౤ೖͯ͠Έͯ

࠾༻ͨ͠ཧ༝

ʓʓͷਖ਼͍͠ઃܭ͸Θ͔Γ·͔͢ʁ

ʓʓͷਖ਼͍͠ઃܭ͸Θ͔Γ·͔͢ʁ • ʓʓ → MVC, MVVM, MVP, Clean Architecture, VIPER • ֶशίετ • ϩʔΧϧ/ࣾ಺ϧʔϧ͕௥Ճ͞Εɺ͞Βʹֶशίετ

ΞʔΩςΫνϟΛਖ਼࣮͘͠૷͢Δ͜ ͱ͸೉͍͠

• ReactorKit͸ϦΞΫςΟϒͰ୯ํ޲ͷΞʔΩςΫνϟΛߏங͢Δ ͨΊͷFramework

ܰྔͳΞʔΩςΫνϟ

ܰྔͳΞʔΩςΫνϟ • 2ͭͷϓϩτίϧͷΈ 1. View protocol (StoryboardView protocol) 2. Reactor protocol • ొ৔ਓ෺͕গͳ͍ͷͰཧղ͠΍͍͢

ܰྔͳΞʔΩςΫνϟ ϨΠϠ ໾ׂ View ActionͷൃߦɺStateΛදࣔ෦ʹ൓ө Reactor Action͔ΒStateΛߋ৽ Service ϏδωεϩδοΫɻ ྫ͑͹ɺAPIϦΫΤετɺDBߋ৽ͳͲ

ܰྔͳΞʔΩςΫνϟ ϨΠϠ ߏஙํ๏ View View protocolʹ४ڌ Reactor Reactor protocolʹ४ڌ Service Protocol͸༻ҙ͞Ε͍ͯͳ͍͕ɺReactor಺ͷϏδωεϩδ οΫΛҠৡ͢ΔϨΠϠ (೚ҙ)

ܰྔͳΞʔΩςΫνϟ • ϓϩδΣΫτͷن໛ʹΑͬͯ͸... • ཻ౓͕େ͖͗ͯ͢ٯʹෳࡶʹʁ • ݸਓతʹ͸ͪΐ͏Ͳ͍͍όϥϯεͩͬͨ

ମܥతͳαϯϓϧ • Counter • ࠷খݶͷ࣮૷ • GitHubSearch • GithubͷϦϙδτϦΛݕࡧ͢Δγϯϓϧͳඇಉظॲཧͷ࣮૷

ମܥతͳαϯϓϧ • RxTodo • ServiceϨΠϠͰTableViewͷॲཧΛ࣮૷ • Cleverbot • ServiceϨΠϠͰAPIϦΫΤετΛ࣮૷ • Drrrible • App StoreʹϦϦʔεࡁΈͷΞϓϦͰɺΑΓ࣮ફతͳ࣮૷͕֬ ೝͰ͖Δ

೔ຊޠͷهࣄ • ReactorKit(Flux + Reactive Programming)ΛֶͿ1 ೖ໳ฤ • ReactorKit(Flux + Reactive Programming)ΛֶͿ2 جૅฤ • ReactorKit(Flux + Reactive Programming)ΛֶͿ3 ࣮ફฤ • ͦͷଞ: iOSΞϓϦͷΞʔΩςΫνϟʹ͍ͭͯߟ͑Δ • MVC2, MVVM, ReactorKitͷൺֱ

ಋೖͯ͠೰Μͩ͜ͱ

ಋೖͯ͠೰Μͩ͜ͱ • 1.5ਓ݄ن໛ͷϓϩδΣΫτʹಋೖ • ࣮ࡍʹಋೖͨ͠ޙʹݟ͍ͯͨͩ͘ͱΑΓϐϯͱ͘Δ͔΋

! Q #1: ը໘ભҠ͸୭͕ߦ͏ʁ

! Q #1: ը໘ભҠ͸୭͕ߦ͏ʁ • ྫ͑͹MVVMͩͱ... • ViewModel • ViewؒΛૄ݁߹ʹ͠Α͏ͱ͍͏ߟ͑ํ • kicksterter/ios-oss ͸View(UIViewController)Ͱը໘ભҠ

! Q #1: ը໘ભҠ͸୭͕ߦ͏ʁ • ! A. ViewϨΠϠ • Reactor͸UIKitΛimportͯ͠͸͍͚ͳ͍

RxTodo

RxTodo - TaskListViewController self.addButtonItem.rx.tap .map(reactor.reactorForCreatingTask) .subscribe(onNext: { [weak self] reactor in guard let `self` = self else { return } let viewController = TaskEditViewController(reactor: reactor) let navigationController = UINavigationController(rootViewController: viewController) self.present(navigationController, animated: true, completion: nil) }) .disposed(by: self.disposeBag)

! Q #2: Alertදࣔ͸୭͕ߦ͏ʁ

RxTodo

! Q #2: Alertදࣔ͸୭͕ߦ͏ʁ • Alert΋ը໘ભҠͳͷͰViewϨΠϠ...? let alert = AlertService(provider: reactor.provider) let alertActions: [TaskEditViewCancelAlertAction] = [.leave, .stay] self.cancelButtonItem.rx.tap .flatMap { alert.show( title: "Really?", message: "All changes will be lost", preferredStyle: .alert, actions: alertActions) } .filter { $0 == .leave } .map { _ in Reactor.Action.cancel } .bind(to: reactor.action) .disposed(by: self.disposeBag)

! Q #2: Alertදࣔ͸୭͕ߦ͏ʁ • ! A. ServiceϨΠϠ

RxTodo - TaskEditViewController final class TaskEditViewController: BaseViewController, View { func bind(reactor: TaskEditViewReactor) { self.cancelButtonItem.rx.tap .map { Reactor.Action.cancel } .bind(to: reactor.action) .disposed(by: self.disposeBag) } }

RxTodo - TaskEditViewReactor case .cancel: if !self.currentState.shouldConfirmCancel { return .just(.dismiss) // no need to confirm } let alertActions: [TaskEditViewCancelAlertAction] = [.leave, .stay] return self.provider.alertService .show( title: "Really?", message: "All changes will be lost", preferredStyle: .alert, actions: alertActions ) .flatMap { alertAction -> Observable in switch alertAction { case .leave: return .just(.dismiss) case .stay: return .empty() } }

AlertService • RxTodo/Sources/Services/AlertServiceͷ࣮૷͕ૉ੖Β͗͢͠Δ • AlertͷActionΛܕ҆શʹͰ͖Δ

AlertͷActionΛܕ҆શʹͰ͖Δ case .cancel: if !self.currentState.shouldConfirmCancel { return .just(.dismiss) // no need to confirm } let alertActions: [TaskEditViewCancelAlertAction] = [.leave, .stay] return self.provider.alertService .show( title: "Really?", message: "All changes will be lost", preferredStyle: .alert, actions: alertActions ) .flatMap { alertAction -> Observable in switch alertAction { case .leave: return .just(.dismiss) case .stay: return .empty() } }

ServiceϨΠϠͰAlertදࣔ • ࢍ൱͸͋Γͦ͏ • ͜Εʹ͍ͭͯ͸೰ΜͩͷͰReactorKitΛֶͿ3 ࣮ફฤʹॻ͍ͨ • Ϣʔβૢ࡞Λ൐͏෭࡞༻΋Action stream಺ͷ൓Ԡ(React)ͷҰͭ ʹա͗ͳ͍ͱߟ͑Δ • ྫ͑͹ผը໘Λݺͼग़͢ೝূϑϩʔ΋൓Ԡͱଊ͑Δ͜ͱ΋Ͱ ͖Δ

Drrrible

Drrrible - AuthService final class AuthService: AuthServiceType { func authorize() -> Observable { // ...... let safariViewController = SFSafariViewController(url: url) let navigationController = UINavigationController(rootViewController: safariViewController) navigationController.isNavigationBarHidden = true self.navigator.present(navigationController) self.currentViewController = navigationController return self.callbackSubject .flatMap(self.accessToken) .do(onNext: { [weak self] accessToken in try self?.saveAccessToken(accessToken) self?.currentAccessToken = accessToken }) .map { _ in } } }

Drrrible - AuthService final class AuthService: AuthServiceType { fileprivate let callbackSubject = PublishSubject() }

Drrrible - AuthService final class AuthService: AuthServiceType { func callback(code: String) { self.callbackSubject.onNext(code) self.currentViewController?.dismiss(animated: true, completion: nil) self.currentViewController = nil } }

Drrrible - LoginViewReactor final class LoginViewReactor: Reactor, ServiceContainer { func mutate(action: Action) -> Observable { switch action { case .login: let setLoading: Observable = .just(Mutation.setLoading(true)) let setLoggedIn: Observable = self.authService.authorize() .flatMap { self.userService.fetchMe() } .map { true } .catchErrorJustReturn(false) .map(Mutation.setLoggedIn) return setLoading.concat(setLoggedIn) } } }

! Q #3: Realmͱͷ૊Έ߹Θͤํ͸ʁ

RealmͷNotification͕༏ल let results = realm.objects(Person.self).filter("age > 5") notificationToken = results.observe { [weak self] (changes: RealmCollectionChange) in guard let tableView = self?.tableView else { return } switch changes { case .initial: tableView.reloadData() case .update(_, let deletions, let insertions, let modifications): tableView.beginUpdates() tableView.insertRows(at: insertions.map({ IndexPath(row: $0, section: 0) }), with: .automatic) tableView.deleteRows(at: deletions.map({ IndexPath(row: $0, section: 0)}), with: .automatic) tableView.reloadRows(at: modifications.map({ IndexPath(row: $0, section: 0) }), with: .automatic) tableView.endUpdates() case .error(let error): fatalError("\(error)") } } https://realm.io/docs/swift/latest/#notifications

! Q #3: Realmͱͷ૊Έ߹Θͤํ͸ʁ • ! A. ServiceϨΠϠ͔ΒͷGlobal Event

Global Event

RxTodo - TaskService

! Q #4: NoActionͷReactor͸ඞཁʁ

ReactorKit - Reactor public struct NoAction {}

Cleverbot - MessageCellReactor final class MessageCellReactor: Reactor { typealias Action = NoAction struct State { var message: String? } let initialState: State init(message: Message) { self.initialState = State(message: message.text) } }

! Q #4: NoActionͷReactor͸ඞཁʁ • ! A. ඞਢͰ͸ͳ͍͚Ͳɺ͍͔ͭ͘ͷར఺΋ߟ͑ΒΕΔ

! Q #4: NoActionͷReactor͸ඞཁʁ • Design Goal (ެࣜυΩϡϝϯτΑΓ) • Start Small: ReactorKit doesn't require the whole application to follow a single architecture. ReactorKit can be > adopted partially, for one or more specific views. You don't need to rewrite everything to use ReactorKit on your existing project. ReactorKit - README.md#design-goal

NoActionͷReactorΛ࡞Δཧ༝ • UIίϯϙʔωϯτΛReactiveʹ͍ͨ͠ • ྫ͑͹Global Event͔ΒͷมߋʹରԠ • ߏ଄ΛकΔ View : Reactor = 1 : 1 • ܕʹ͸Ίͨઃܭ͸ָ

! Q #5: UITableViewCellͷReactor ͸୭͕؅ཧ͢Δʁ

! Q #5: UITableViewCellͷReactor͸୭͕؅ཧ͢Δʁ • ྫ͑͹ɺUITableViewControllerͷ Reactorͱෳ਺ͷUITableViewCellͷ Reactorͱ͍͏ߏ੒ • UITableViewCellͷReactor͸ಈతʹ૿ ݮ Cleverbot

! Q #5: UITableViewCellͷReactor͸୭͕؅ཧ͢Δʁ • ! A. UITableViewControllerͷReactor Cleverbot

Cleverbot - ChatViewSection struct ChatViewSection { var items: [ChatViewSectionItem] } enum ChatViewSectionItem { case incomingMessage(MessageCellReactor) case outgoingMessage(MessageCellReactor) }

Cleverbot - ChatViewReactor final class ChatViewReactor: Reactor { struct State { var sections: [ChatViewSection] = [ChatViewSection(items: [])] var cleverbotState: String? = nil } }

6. Dependency Injection

Drrrible (0.2.0) - ServiceContainer let DI = Container().then { $0.register(Networking.self) { _ in Networking(plugins: [AuthPlugin()]) } .inObjectScope(.container) $0.autoregister(AuthServiceType.self, initializer: AuthService.init) .inObjectScope(.container) $0.autoregister(UserServiceType.self, initializer: UserService.init) .inObjectScope(.container) $0.autoregister(ShotServiceType.self, initializer: ShotService.init) .inObjectScope(.container) $0.autoregister(AppStoreServiceType.self, initializer: AppStoreService.init) .inObjectScope(.container) }

Drrrible (0.2.0) - ServiceContainer protocol ServiceContainer {} extension ServiceContainer { var networking: Networking { return DI.resolve(Networking.self)! } var authService: AuthServiceType { return DI.resolve(AuthServiceType.self)! } var userService: UserServiceType { return DI.resolve(UserServiceType.self)! } var shotService: ShotServiceType { return DI.resolve(ShotServiceType.self)! } var appStoreService: AppStoreServiceType { return DI.resolve(AppStoreServiceType.self)! } }

SwinjectStoryboard (ࢼ͠ʹಋೖ) extension SwinjectStoryboard { @objc class func setup() { defaultContainer.register(AppRootViewReactor.self) { _ in AppRootViewReactor() } defaultContainer.storyboardInitCompleted(AppRootViewController.self) { $1.reactor = $0.resolve(AppRootViewReactor.self) } } }

DI͸೰Έத • ࠷৽ͷDrrrible͸Swinjectʹґଘ͍ͯ͠ͳ͍ • Remove Swinject @devxoul committed on 16 Aug 2017 • commit͔Β͸ͦͷ൑அʹࢸͬͨܦա͸ಡΈऔΕͳ͔ͬͨͷ Ͱɺޙ΄Ͳ devxoul ͞Μʹ࣭໰͠ʹߦ͘ • devxoul/PureΛಋೖ༧ఆʁ • Pure DI͸DIίϯςφͷͳ͍DI

՝୊ • transformͷઃܭ͕೉͍͠ • viewWillAppear() Ͱ reflash ͨ͠ํ͕͸Δ͔ʹ؆୯ • ৄ͘͠͸ɺReactorKitΛֶͿ3 ࣮ફฤ • େن໛ʹͳͬͨ࣌ͷύϑΥʔϚϯε͕ؾʹͳΔ

·ͱΊ

·ͱΊ • ReactorKitͷܕʹ͸Ίͨઃܭ͸ָ • Protocolʹ४ڌ͢Δ͚ͩͳͷͰॊೈͳઃܭ͕Մೳ • ୯ํ޲ετϦʔϜ͸γϯϓϧͰ੔ཧ͠΍͍͢ • ΞʔΩςΫνϟߏஙͷίʔυྔΛ࡟ݮ

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ