Hello, ReactorKit
7 likes3,405 views
This document introduces ReactorKit, an open source framework that helps manage state and handle user interactions using RxSwift. It discusses some of the motivations for ReactorKit like avoiding massive view controllers and managing state changes gracefully. The basic concepts of ReactorKit are explained including the unidirectional data flow from actions to mutations to state updates. Examples of user interactions and state changes are provided. Advanced topics covered include view communications between different reactors and testing views and reactors. Future ideas for expanding ReactorKit are proposed like improving testing support and documentation.
![RxSwift State Managing
After a while...
Variable<Int>
PublishSubject<Int>
PublishRelay<[Item]>
Variable<User>
BehaviorSubject<String>
Variable<String>](https://image.slidesharecdn.com/reactorkitmeetupjapan-180628114100/85/Hello-ReactorKit-16-320.jpg)
![[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기](https://cdn.slidesharecdn.com/ss_thumbnails/html5canvas-181011022536-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to Hello, ReactorKit (20)
![STATE MANAGEMENT IN REACT [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/statemanagementinreactautosaved-241017053717-15b39b76-thumbnail.jpg?width=560&fit=bounds)
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Suyeol Jeon (11)
Ad
Recently uploaded (20)
Hello, ReactorKit
- 1. Hello, ReactorKit! 👋 Suyeol Jeon https://github.com/devxoul
- 2. Jeon Suyeol StyleShare Inc. Open Source Lover Then URLNavigator RxSwift ObjectMapper
- 3. Why?
- 5. Why? Massive View Controller RxSwift State Managing
- 9. RxSwift State Managing Cyclic Data Dependencies
- 10. RxSwift State Managing currentValue increaseValue()
- 11. RxSwift State Managing currentValue increaseValue() last state
- 12. RxSwift State Managing currentValue increaseValue() last state result
- 13. RxSwift State Managing Cyclic Data Dependencies
- 14. RxSwift State Managing Cyclic Data Dependencies Pagination List operation Value update ...
- 15. RxSwift State Managing After a while...
- 16. RxSwift State Managing After a while... Variable<Int> PublishSubject<Int> PublishRelay<[Item]> Variable<User> BehaviorSubject<String> Variable<String>
- 17. I wanted to... 1. Avoid Massive View Controller
- 18. I wanted to... 1. Avoid Massive View Controller 2. Take advantages of RxSwift
- 19. I wanted to... 1. Avoid Massive View Controller 2. Take advantages of RxSwift 3. Manage states gracefully
- 20. ReactorKit
- 21. ReactorKit can... 1. Avoid Massive View Controller ✅
- 22. ReactorKit can... 1. Avoid Massive View Controller ✅ Separates responsibilities of view and logic
- 23. ReactorKit can... 1. Avoid Massive View Controller ✅ Separates responsibilities of view and logic View Controller becomes simple
- 24. ReactorKit can... 2. Take advantages of RxSwift ✅
- 25. ReactorKit can... 2. Take advantages of RxSwift ✅ Based on RxSwift
- 26. ReactorKit can... 2. Take advantages of RxSwift ✅ Based on RxSwift All of RxSwift features are available
- 27. ReactorKit can... 3. Manage states gracefully ✅
- 28. ReactorKit can... 3. Manage states gracefully ✅ Unidirectional data flow
- 29. ReactorKit can... 3. Manage states gracefully ✅ Unidirectional data flow Modify states only in reduce()
- 30. ReactorKit can... 3. Manage states gracefully ✅ Unidirectional data flow Modify states only in reduce() State management became easy
- 31. ReactorKit can... Be the future ~1.1K ⭐ ~50K downloads ~900 apps https://starcharts.herokuapp.com/ReactorKit/ReactorKit
- 32. ReactorKit can... Be the future ~1.1K ⭐ ~50K downloads ~900 apps https://starcharts.herokuapp.com/ReactorKit/ReactorKit
- 33. Basic Concept
- 34. Basic Concept Abstraction of User Interaction Abstraction of View State
- 35. Basic Concept Renders view states Handles user interactions ViewController,Cell,...
- 36. Basic Concept protocol View { associatedtype Reactor var disposeBag: DisposeBag // gets called when // self.reactor is changed func bind(reactor: Reactor) }
- 37. Basic Concept protocol StoryboardView { associatedtype Reactor var disposeBag: DisposeBag // gets called when // the view is loaded func bind(reactor: Reactor) } // for Storyboard support
- 38. Basic Concept Performs business logic Manages states Corresponds to view
- 39. Basic Concept protocol Reactor { associatedtype Action associatedtype Mutation associatedtype State var initialState: State }
- 40. Basic Concept Based on RxSwift
- 41. Data Flow
- 42. Data Flow
- 43. Data Flow Action → State ❌
- 44. Data Flow Action → Mutation → State
- 45. Data Flow Action → Mutation → State State manipulator
- 46. Data Flow State manipulator Async-able Action → Mutation → State
- 47. Data Flow State manipulator Async-able Not exposed to view Action → Mutation → State
- 48. Data Flow (Action) -> Observable<Mutation> (State, Mutation) -> State
- 49. Data Flow
- 50. Data Flow class ProfileViewReactor: Reactor { enum Action { } struct State { } }
- 51. Data Flow class ProfileViewReactor: Reactor { enum Action { case follow // user interaction } struct State { } }
- 52. Data Flow class ProfileViewReactor: Reactor { enum Action { case follow // user interaction } struct State { var isFollowing: Bool // view state } }
- 53. Data Flow class ProfileViewReactor: Reactor { enum Action { case follow // user interaction } struct State { var isFollowing: Bool // view state } } Execute user follow API → Change state
- 54. Data Flow class ProfileViewReactor: Reactor { enum Action { case follow // user interaction } struct State { var isFollowing: Bool // view state } } Execute user follow API → Change state Async
- 55. Data Flow class ProfileViewReactor: Reactor { enum Action { case follow // user interaction } enum Mutation { } struct State { var isFollowing: Bool // view state } }
- 56. Data Flow class ProfileViewReactor: Reactor { enum Action { case follow // user interaction } enum Mutation { case setFollowing(Bool) // change state } struct State { var isFollowing: Bool // view state } }
- 57. Data Flow
- 58. Data Flow Tap follow button
- 64. Data Flow
- 67. Data Flow isFollowing = true
- 69. Data Flow
- 70. More Examples
- 71. More Examples
- 72. Advanced View Communications Testing View and Reactor
- 76. View Communications Passing user data Observing button tap
- 77. View Communications - Passing user data ProfileView Controller UserCell ProfileView Reactor
- 78. View Communications - Passing user data ProfileView Controller UserCell ProfileView Reactor 1.User
- 79. View Communications - Passing user data ProfileView Controller UserCell ProfileView Reactor 1.User 2.User
- 80. View Communications - Passing user data // ProfileViewReactor struct State { }
- 81. View Communications - Passing user data // ProfileViewReactor struct State { var user: User? }
- 82. View Communications - Passing user data // ProfileViewReactor struct State { var user: User? } // ProfileViewController let cell = collectionView.dequeue... return cell
- 83. View Communications - Passing user data // ProfileViewReactor struct State { var user: User? } // ProfileViewController let cell = collectionView.dequeue... if let reactor = self.reactor { } return cell
- 84. View Communications - Passing user data // ProfileViewReactor struct State { var user: User? } // ProfileViewController let cell = collectionView.dequeue... if let reactor = self.reactor { cell.user = reactor.currentState.user } return cell
- 85. View Communications - Observing button tap ProfileView Controller UserCell ProfileView Reactor
- 86. View Communications - Observing button tap ProfileView Controller UserCell ProfileView Reactor 1.rx.tap
- 87. View Communications - Observing button tap ProfileView Controller UserCell ProfileView Reactor 2.Action.follow 1.rx.tap
- 88. View Communications - Observing button tap ProfileView Controller UserCell ProfileView Reactor 2.Action.follow 1.rx.tap Reactive Extension
- 89. View Communications - Observing button tap // UserCell extension Reactive where Base: UserCell { }
- 90. View Communications - Observing button tap // UserCell extension Reactive where Base: UserCell { var buttonTap: ControlEvent<Void> { } }
- 91. View Communications - Observing button tap // UserCell extension Reactive where Base: UserCell { var buttonTap: ControlEvent<Void> { return self.base.followButton.rx.tap } }
- 92. View Communications - Observing button tap // UserCell extension Reactive where Base: UserCell { var buttonTap: ControlEvent<Void> { return self.base.followButton.rx.tap } } // ProfileViewController cell.user = reactor.currentState.user
- 93. View Communications - Observing button tap // UserCell extension Reactive where Base: UserCell { var buttonTap: ControlEvent<Void> { return self.base.followButton.rx.tap } } // ProfileViewController cell.user = reactor.currentState.user cell.rx.buttonTap
- 94. View Communications - Observing button tap // UserCell extension Reactive where Base: UserCell { var tap: ControlEvent<Void> { return self.base.followButton.rx.tap } } // ProfileViewController cell.user = reactor.currentState.user cell.rx.buttonTap .map { Reactor.Action.follow }
- 95. View Communications - Observing button tap // UserCell extension Reactive where Base: UserCell { var tap: ControlEvent<Void> { return self.base.followButton.rx.tap } } // ProfileViewController cell.user = reactor.currentState.user cell.rx.buttonTap .map { Reactor.Action.follow } .bind(to: reactor.action)
- 96. View Communications - Observing button tap // UserCell extension Reactive where Base: UserCell { var tap: ControlEvent<Void> { return self.base.followButton.rx.tap } } // ProfileViewController cell.user = reactor.currentState.user cell.rx.buttonTap .map { Reactor.Action.follow } .bind(to: reactor.action) .disposed(by: self.disposeBag)
- 99. View Communications - Passing user data ProfileView Controller UserCell ProfileView Reactor
- 100. View Communications - Passing user data ProfileView Controller UserCell ProfileView Reactor UserCell Reactor
- 101. View Communications - Passing user data ProfileView Controller UserCell ProfileView Reactor 1.CellReactor UserCell Reactor
- 102. View Communications - Passing user data ProfileView Controller UserCell ProfileView Reactor 1.CellReactor 2.CellReactor UserCell Reactor
- 103. View Communications - Passing user data ProfileView Controller UserCell ProfileView Reactor 1.CellReactor 2.CellReactor UserCell Reactor
- 104. View Communications - Passing user data // ProfileViewReactor struct State { var user: User? }
- 105. View Communications - Passing user data // ProfileViewReactor struct State { var user: User? var userCellReactor: UserCellReactor? }
- 106. View Communications - Passing user data // ProfileViewReactor struct State { var user: User? var userCellReactor: UserCellReactor? } // ProfileViewController cell.user = reactor.currentState.user
- 107. View Communications - Passing user data // ProfileViewReactor struct State { var user: User? var userCellReactor: UserCellReactor? } // ProfileViewController cell.user = reactor.currentState.user cell.reactor = reactor.currentState.userCellReactor
- 108. Testing View and Reactor What to test? View Reactor
- 109. Testing View and Reactor What to test? View Action: on user interaction → action sent? Reactor
- 110. Testing View and Reactor What to test? View Action: on user interaction → action sent? State: on state change → view updated? Reactor
- 111. Testing View and Reactor What to test? View Action: on user interaction → action sent? State: on state change → view updated? Reactor State: on action receive → state updated?
- 112. Testing View and Reactor How to test?
- 113. Testing View and Reactor How to test? Reactor.stub()
- 114. Testing View and Reactor How to test? Reactor.stub() state: set fake state
- 115. Testing View and Reactor How to test? Reactor.stub() state: set fake state action: send fake action
- 116. Testing View and Reactor How to test? Reactor.stub() state: set fake state action: send fake action actions: log received actions
- 117. Testing View and Reactor - View Action
- 118. Testing View and Reactor - View Action When: follow button taps Then: sends follow action
- 119. Testing View and Reactor - View Action // given let reactor = ProfileViewReactor() // when // then
- 120. Testing View and Reactor - View Action // given let reactor = ProfileViewReactor() reactor.stub.isEnabled = true // when // then
- 121. Testing View and Reactor - View Action // given let reactor = ProfileViewReactor() reactor.stub.isEnabled = true reactor.stub.state.value.user = User() // when // then
- 122. Testing View and Reactor - View Action // given let reactor = ProfileViewReactor() reactor.stub.isEnabled = true reactor.stub.state.value.user = User() let viewController = ProfileViewController() viewController.reactor = reactor // when // then
- 123. Testing View and Reactor - View Action // given let reactor = ProfileViewReactor() reactor.stub.isEnabled = true reactor.stub.state.value.user = User() let viewController = ProfileViewController() viewController.reactor = reactor // when let button = viewController.userCell.followButton // then
- 124. Testing View and Reactor - View Action // given let reactor = ProfileViewReactor() reactor.stub.isEnabled = true reactor.stub.state.value.user = User() let viewController = ProfileViewController() viewController.reactor = reactor // when let button = viewController.userCell.followButton button.sendActions(for: .touchUpInside) // then
- 125. Testing View and Reactor - View Action // given let reactor = ProfileViewReactor() reactor.stub.isEnabled = true reactor.stub.state.value.user = User() let viewController = ProfileViewController() viewController.reactor = reactor // when let button = viewController.userCell.followButton button.sendActions(for: .touchUpInside) // then let lastAction = reactor.stub.actions.last XCTAssertEqual(lastAction, .follow)
- 126. Testing View and Reactor - View State When: following the user Then: button is selected
- 127. Testing View and Reactor - View State // given let cellReactor = UserCellReactor() // when // then
- 128. Testing View and Reactor - View State // given let cellReactor = UserCellReactor() cellReactor.stub.isEnabled = true // when // then
- 129. Testing View and Reactor - View State // given let cellReactor = UserCellReactor() cellReactor.stub.isEnabled = true let cell = UserCell() cell.reactor = cellReactor // when // then
- 130. Testing View and Reactor - View State // given let cellReactor = UserCellReactor() cellReactor.stub.isEnabled = true let cell = UserCell() cell.reactor = cellReactor // when cellReactor.stub.state.value.isFollowing = true // then
- 131. Testing View and Reactor - View State // given let cellReactor = UserCellReactor() cellReactor.stub.isEnabled = true let cell = UserCell() cell.reactor = cellReactor // when cellReactor.stub.state.value.isFollowing = true // then XCTAssertTrue(cell.followButton.isSelected)
- 132. Testing View and Reactor - Reactor State When: receive follow action Then: update following state ProfileView Reactor
- 133. Testing View and Reactor - Reactor State // given let reactor = ProfileViewReactor() // when // then
- 134. Testing View and Reactor - Reactor State // given let reactor = ProfileViewReactor() // when reactor.action.onNext(.follow) // then
- 135. Testing View and Reactor - Reactor State // given let reactor = ProfileViewReactor() // when reactor.action.onNext(.follow) // then let user = reactor.currentState.user XCTAssertEqual(user?.isFollowing, true)
- 137. Development Testing Support SectionReactor AlertReactor ModelReactor Plugins ... Nested stub Dummy reactor ... Building Extensions
- 139. Community RxSwift Slack #reactorkit (English) https://rxswift-slack.herokuapp.com Swift Korea Slack #reactorkit (Korean) http://slack.swiftkorea.org