Hello, ReactorKit 👋

https://www.slideshare.net/devxoul/hello-reactorkit

Transcript

1. Hello, ReactorKit! Suyeol Jeon https://github.com/devxoul
2. Jeon Suyeol StyleShare Inc. Open Source Lover Then URLNavigator RxSwift ObjectMapper
3. Why?
4. Why? Massive View Controller
5. Why? Massive View Controller RxSwift State Managing
6. Massive View Controller https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html
7. Massive View Controller https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html
8. Massive View Controller https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html
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
59. Data Flow Action.follow
60. Data Flow Action.follow
61. Data Flow UserService.follow()
62. Data Flow UserService
63. Data Flow Observable<Bool>
64. Data Flow
65. Data Flow Mutation.setFollowing(true)
66. Data Flow Mutation.setFollowing(true)
67. Data Flow isFollowing = true
68. Data Flow Update follow button
69. Data Flow
70. More Examples
71. More Examples
72. Advanced View Communications Testing View and Reactor
73. View Communications ProfileViewController ProfileViewReactor
74. View Communications UICollectionView ProfileViewController ProfileViewReactor
75. View Communications UICollectionView ProfileViewController ProfileViewReactor UserCell
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)
97. View Communications UICollectionView ProfileViewController ProfileViewReactor UserCell
98. View Communications UICollectionView ProfileViewController ProfileViewReactor UserCell UserCellReactor
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)
136. Future Ideas Development Documentation Community
137. Development Testing Support SectionReactor AlertReactor ModelReactor Plugins ... Nested stub Dummy reactor ... Building Extensions
138. Documentation Best Practices Translations Code-level Documentation
139. Community RxSwift Slack #reactorkit (English) https://rxswift-slack.herokuapp.com Swift Korea Slack #reactorkit (Korean) http://slack.swiftkorea.org
140. https://reactorkit.io