Downloaded 32 times
![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)
![RxSwift State Managing
After a while...
Variable<Int>
PublishSubject<Int>
PublishRelay<[Item]>
Variable<User>
BehaviorSubject<String>
Variable<String>](https://image.slidesharecdn.com/reactorkitmeetupjapan-180628114100/75/Hello-ReactorKit-16-2048.jpg)
Uploaded bySuyeol Jeon
Hello, ReactorKit
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.
More Related Content
![[TECHCON 2019: MOBILE - iOS]2.들숨에 협업 날숨에 클린코드](https://cdn.slidesharecdn.com/ss_thumbnails/2-190712080732-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Hello, ReactorKit
- 1. Hello, ReactorKit! 👋 SuyeolJeon https://github.com/devxoul
- 2. Jeon Suyeol StyleShare Inc. OpenSource Lover Then URLNavigator RxSwift ObjectMapper
- 3.
- 4.
- 5. Why? Massive View Controller RxSwiftState Managing
- 6.
- 7.
- 8.
- 9. RxSwift State Managing CyclicData Dependencies
- 10. RxSwift State Managing currentValueincreaseValue()
- 11. RxSwift State Managing currentValueincreaseValue() last state
- 12. RxSwift State Managing currentValueincreaseValue() last state result
- 13. RxSwift State Managing CyclicData Dependencies
- 14. RxSwift State Managing CyclicData Dependencies Pagination List operation Value update ...
- 15. RxSwift State Managing Aftera while...
- 16. RxSwift State Managing Aftera 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.
- 21. ReactorKit can... 1. AvoidMassive View Controller ✅
- 22. ReactorKit can... 1. AvoidMassive View Controller ✅ Separates responsibilities of view and logic
- 23. ReactorKit can... 1. AvoidMassive View Controller ✅ Separates responsibilities of view and logic View Controller becomes simple
- 24. ReactorKit can... 2. Takeadvantages of RxSwift ✅
- 25. ReactorKit can... 2. Takeadvantages of RxSwift ✅ Based on RxSwift
- 26. ReactorKit can... 2. Takeadvantages of RxSwift ✅ Based on RxSwift All of RxSwift features are available
- 27. ReactorKit can... 3. Managestates gracefully ✅
- 28. ReactorKit can... 3. Managestates gracefully ✅ Unidirectional data flow
- 29. ReactorKit can... 3. Managestates gracefully ✅ Unidirectional data flow Modify states only in reduce()
- 30. ReactorKit can... 3. Managestates gracefully ✅ Unidirectional data flow Modify states only in reduce() State management became easy
- 31. ReactorKit can... Be thefuture ~1.1K ⭐ ~50K downloads ~900 apps https://starcharts.herokuapp.com/ReactorKit/ReactorKit
- 32. ReactorKit can... Be thefuture ~1.1K ⭐ ~50K downloads ~900 apps https://starcharts.herokuapp.com/ReactorKit/ReactorKit
- 33.
- 34. Basic Concept Abstraction ofUser Interaction Abstraction of View State
- 35. Basic Concept Renders viewstates 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 businesslogic Manages states Corresponds to view
- 39. Basic Concept protocol Reactor{ associatedtype Action associatedtype Mutation associatedtype State var initialState: State }
- 40. Basic Concept Based onRxSwift
- 41.
- 42.
- 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 Notexposed to view Action → Mutation → State
- 48. Data Flow (Action) ->Observable<Mutation> (State, Mutation) -> State
- 49.
- 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.
- 58. Data Flow Tap followbutton
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72. Advanced View Communications Testing Viewand Reactor
- 73.
- 74.
- 75.
- 76. View Communications Passing userdata 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.
- 98.
- 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 andReactor What to test? View Reactor
- 109. Testing View andReactor What to test? View Action: on user interaction → action sent? Reactor
- 110. Testing View andReactor What to test? View Action: on user interaction → action sent? State: on state change → view updated? Reactor
- 111. Testing View andReactor 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 andReactor How to test?
- 113. Testing View andReactor How to test? Reactor.stub()
- 114. Testing View andReactor How to test? Reactor.stub() state: set fake state
- 115. Testing View andReactor How to test? Reactor.stub() state: set fake state action: send fake action
- 116. Testing View andReactor How to test? Reactor.stub() state: set fake state action: send fake action actions: log received actions
- 117. Testing View andReactor - View Action
- 118. Testing View andReactor - View Action When: follow button taps Then: sends follow action
- 119. Testing View andReactor - View Action // given let reactor = ProfileViewReactor() // when // then
- 120. Testing View andReactor - View Action // given let reactor = ProfileViewReactor() reactor.stub.isEnabled = true // when // then
- 121. Testing View andReactor - View Action // given let reactor = ProfileViewReactor() reactor.stub.isEnabled = true reactor.stub.state.value.user = User() // when // then
- 122. Testing View andReactor - 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 andReactor - 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 andReactor - 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 andReactor - 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 andReactor - View State When: following the user Then: button is selected
- 127. Testing View andReactor - View State // given let cellReactor = UserCellReactor() // when // then
- 128. Testing View andReactor - View State // given let cellReactor = UserCellReactor() cellReactor.stub.isEnabled = true // when // then
- 129. Testing View andReactor - View State // given let cellReactor = UserCellReactor() cellReactor.stub.isEnabled = true let cell = UserCell() cell.reactor = cellReactor // when // then
- 130. Testing View andReactor - 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 andReactor - 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 andReactor - Reactor State When: receive follow action Then: update following state ProfileView Reactor
- 133. Testing View andReactor - Reactor State // given let reactor = ProfileViewReactor() // when // then
- 134. Testing View andReactor - Reactor State // given let reactor = ProfileViewReactor() // when reactor.action.onNext(.follow) // then
- 135. Testing View andReactor - Reactor State // given let reactor = ProfileViewReactor() // when reactor.action.onNext(.follow) // then let user = reactor.currentState.user XCTAssertEqual(user?.isFollowing, true)
- 136.
- 137. Development Testing Support SectionReactor AlertReactor ModelReactor Plugins ... Nested stub Dummyreactor ... Building Extensions
- 138.
- 139. Community RxSwift Slack #reactorkit(English) https://rxswift-slack.herokuapp.com Swift Korea Slack #reactorkit (Korean) http://slack.swiftkorea.org
- 140.