Mikhail Rakhmanov - Redux in production for a simple app

In this talk Mikhail will describe his experience working with Redux on a simple production app for Russian clothes brand named Outlaw. Also he will briefly mention how he used some of the Redux elements in bigger production apps.

Mikhail will focus on different aspects of the architecture, starting from explaining the concept in general and ending with more complex aspects as implementing services and navigation. In the end we will discuss when it does make sense to use Redux and when not and if it plays well with UIKit (not always especially with CoreData and TableViews).

Mikhail is a software developer from 2016. Worked in many Russian companies including Yandex (on Yandex Translate iOS app). Now working in Blacklane as an iOS developer and also helping several backend teams.

Video: https://youtu.be/GQOgKRfGK_s

Transcript

1. Redux in iOS
2. It all starts with a story…
3. Berlin
4. Berlin
5. Berlin Make Freelance App
6. Berlin Make Freelance App Boring?
7. Berlin Make Freelance App Boring? Use Redux!
8. The App Displays info about them Scans NFC chips on clothes
9. The App Displays info about them Scans NFC chips on clothes
11. Main Screen Tab Bar History Screen
12. Main Screen Tab Bar History Screen Detail Screen
13. Main Screen Tab Bar History Screen Detail Screen Photo Gallery Video Player
14. Redux in iOS Main entities in Redux Key implementation aspects in iOS Advantages and disadvantages What is Redux?
15. Redux in iOS Main entities in Redux Key implementation aspects in iOS Advantages and disadvantages What is Redux?
16. Redux in iOS Main entities in Redux Key implementation aspects in iOS Advantages and disadvantages What is Redux?
17. Redux in iOS Main entities in Redux Key implementation aspects in iOS Advantages and disadvantages What is Redux?
18. Redux diagram
19. What is Redux? View (Subscriber)
20. What is Redux? View (Subscriber) Action Store
21. What is Redux? View (Subscriber) Reducer Reducer Reducer … Action Store Action State
22. What is Redux? View (Subscriber) Reducer Reducer Reducer … Action Store Action State New State New State
23. What is Redux? View (Subscriber) Reducer Reducer Reducer … Action Store Action State New State New State Unidirectional Architecture!
24. Action
25. • One and only way to interact with the Store Action • Sends arbitrary data to Store • Struct or Enum
26. • One and only way to interact with the Store Action • Sends arbitrary data to Store • Struct or Enum
27. • One and only way to interact with the Store Action • Sends arbitrary data to Store • Struct or Enum
28. public protocol Action {} struct ScanningEnabledAction: Action { let parameters: ScanningParameters } Action
29. State
30. • Only source of truth in the App State • Usually nested structure
31. • Only source of truth in the App State • Usually nested structure
32. Application State public protocol StateType {} struct AppState: StateType { var navigationState = NavigationState() var currentProductState = CurrentProductState() var onboardingState = OnboardingState() var historyListState = HistoryListState() var photoGalleryState = PhotoGalleryState() }
33. Screen State struct HistoryListState { var entries: [VerisiumHistoryEntry] = [] }
34. • Immutable -> use structs State (continued) • Copies can be made too often (use copy on write if needed) • One state for the App (!)
35. • Immutable -> use structs State (continued) • Copies can be made too often (use copy on write if needed) • One state for the App (!)
36. • Immutable -> use structs State (continued) • Copies can be made too often (use copy on write if needed) • One state for the App (!)
37. Reducers ⚙
38. Reducers Reducer Reducer Reducer … Action State New State (Action, AppState) -> AppState Store
39. Reducers Reducer Reducer Reducer … Action State New State (Action, AppState) -> AppState Store
40. Application Reducer func appReducer(action: Action, state: AppState?) -> AppState { guard let state = state else { return AppState() } let newNavigationState = navigationReducer( action: action, navigationState: state.navigationState ) ... return AppState( navigationState: newNavigationState, currentProductState: newCurrentProductState, onboardingState: newOnboardingState, historyListState: newHistoryListState, photoGalleryState: newPhotoGalleryState ) }
41. Application Reducer func appReducer(action: Action, state: AppState?) -> AppState { guard let state = state else { return AppState() } let newNavigationState = navigationReducer( action: action, navigationState: state.navigationState ) ... return AppState( navigationState: newNavigationState, currentProductState: newCurrentProductState, onboardingState: newOnboardingState, historyListState: newHistoryListState, photoGalleryState: newPhotoGalleryState ) }
42. Screen Reducer func historyListReducer( action: Action, historyListState: HistoryListState ) -> HistoryListState { var newState = historyListState switch action { case let result as HistoryFetchResultAction: switch result { case .success(let entries): newState.entries = entries case .error: newState.entries = [] } } return newState }
43. Screen Reducer func historyListReducer( action: Action, historyListState: HistoryListState ) -> HistoryListState { var newState = historyListState switch action { case let result as HistoryFetchResultAction: switch result { case .success(let entries): newState.entries = entries case .error: newState.entries = [] } } return newState }
44. • Pure functions Reducers (continued) • Synchronous (!) -> no complex calculations • Only for changes of State
45. • Pure functions Reducers (continued) • Synchronous (!) -> no complex calculations • Only for changes of State
46. • Pure functions Reducers (continued) • Synchronous (!) -> no complex calculations • Only for changes of State
47. View (Subscriber)
48. View (Subscriber) View (Subscriber) Action New State Store
49. Subscription override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) store.subscribe(self, transform: { subscription in subscription.select { $0.currentProductState } }) } extension ProductDetailViewController: StoreSubscriber { typealias StoreSubscriberStateType = CurrentProductState public func newState(state: CurrentProductState) { DispatchQueue.main.async { self.updateView(state: state) } } }
50. Subscription override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) store.subscribe(self, transform: { subscription in subscription.select { $0.currentProductState } }) } extension ProductDetailViewController: StoreSubscriber { typealias StoreSubscriberStateType = CurrentProductState public func newState(state: CurrentProductState) { DispatchQueue.main.async { self.updateView(state: state) } } }
51. Sending Actions extension ProductDetailViewController: ProductDetailDataSourceDelegate { func didTapVideoExpand() { store.dispatch(VideoControlAction.expand) } }
52. • We cannot put them inside Reducers What about asynchronous tasks? • We also cannot put them inside View • Middlewares to the rescue!
53. • We cannot put them inside Reducers What about asynchronous tasks? • We also cannot put them inside View • Middlewares to the rescue!
54. • We cannot put them inside Reducers What about asynchronous tasks? • We also cannot put them inside View • Middlewares to the rescue!
55. Middleware
56. Middleware Reducer Reducer Reducer … Action State Store State
57. Middleware Reducer Reducer Reducer … Action Middleware Middleware Middleware … Action State Store State
58. From History to Detail Transition Action HistoryTransitionAction NavigationReducer ProductFetchMiddleware VideoPlayerMiddleware CurrentProductReducer
59. From History to Detail Transition Action HistoryTransitionAction NavigationReducer ProductFetchMiddleware VideoPlayerMiddleware CurrentProductReducer
60. From History to Detail Transition Action HistoryTransitionAction ProductFetchMiddleware ProductFetchAction
61. Middleware func fetchProduct(action: Action, context: MiddlewareContext<AppState>) -> Action? { guard let action = action as? HistoryTransitionAction else { return action } Verisium.fetchProduct(reference: reference) { result in switch result { case .success(let product): context.dispatch(ProductFetchAction.completed(product)) case .failure(_): context.dispatch(ProductFetchAction.failed) } } return action }
62. Middleware func fetchProduct(action: Action, context: MiddlewareContext<AppState>) -> Action? { guard let action = action as? HistoryTransitionAction else { return action } Verisium.fetchProduct(reference: reference) { result in switch result { case .success(let product): context.dispatch(ProductFetchAction.completed(product)) case .failure(_): context.dispatch(ProductFetchAction.failed) } } return action }
63. Navigation
64. • Keep navigation out of State (not really good) Navigation • Insert it inside State (not very easy, monitor UIKit)
65. • Keep navigation out of State (not really good) Navigation • Insert it inside State (not very easy, monitor UIKit)
67. Main Screen Tab Bar Modal transitions
68. Main Screen Tab Bar Detail Screen Modal transitions
69. Main Screen Tab Bar Detail Screen Photo Gallery Modal transitions
70. Main Screen Tab Bar Detail Screen Modal transitions
71. Main Screen Tab Bar Modal transitions
72. Tab Bar History Screen Embed transitions
73. • Is a graph/tree Navigation State • Think of a tab bar transitions as switching a branch • Think of modal transitions as creating more levels in the tree
74. • Is a graph/tree Navigation State • Think of a tab bar transitions as switching a branch • Think of modal transitions as creating more levels in the tree
75. • Is a graph/tree Navigation State • Think of a tab bar transitions as switching a branch • Think of modal transitions as creating more levels in the tree
76. NavigationState struct NavigationState { var navigationHistory: [Screen: [Transition]] var currentBranch: Screen var lastTransition: Transition }
77. • You need to keep track of all changes! Navigation State (continued) • Need to write custom components • Be ready to face difficulties and find adhoc solutions
78. • You need to keep track of all changes! Navigation State (continued) • Need to write custom components • Be ready to face difficulties and find adhoc solutions
79. • You need to keep track of all changes! Navigation State (continued) • Need to write custom components • Be ready to face difficulties and find adhoc solutions
80. AdHoc example final class VideoPlayerViewController: AVPlayerViewController { override func viewDidDisappear(_ animated: Bool) { super.viewDidDisappear(animated) store.dispatch(VideoPlayerCloseAction(...)) } }
81. How I built the navigation? Action View Controller Navigation Reducer
82. func navigationReducer(action: Action, navigationState: NavigationState ) -> NavigationState { var state = navigationState Navigation Reducer switch action { case let photoGalleryAction as PhotoGalleryAction: switch photoGalleryAction { case .open, .openMainPhoto: state.addTransition(.currentProduct, .photoGallery) case .close: state.removeLastTransition() default: break } } return state }
83. func navigationReducer(action: Action, navigationState: NavigationState ) -> NavigationState { var state = navigationState Navigation Reducer switch action { case let photoGalleryAction as PhotoGalleryAction: switch photoGalleryAction { case .open, .openMainPhoto: state.addTransition(.currentProduct, .photoGallery) case .close: state.removeLastTransition() default: break } } return state }
84. How I built the navigation? Action View Controller Navigation Reducer Transition Handler
85. Transition Handler final class ScreenTransitionHandler: StoreSubscriber { func newState(state: NavigationState) { if state.lastTransition != self.lastKnownTransition { self.lastKnownTransition = state.lastTransition self.performTransition(state: state) } } func performTransition(state: NavigationState) { for (_, observer) in transitionObservers { observer.value?.newTransition(state.lastTransition) } } }
86. Transition Handler final class ScreenTransitionHandler: StoreSubscriber { func newState(state: NavigationState) { if state.lastTransition != self.lastKnownTransition { self.lastKnownTransition = state.lastTransition self.performTransition(state: state) } } func performTransition(state: NavigationState) { for (_, observer) in transitionObservers { observer.value?.newTransition(state.lastTransition) } } }
87. How I built the navigation? Action View Controller Navigation Reducer Transition Handler Coordinator Transition
88. Coordinator final class CurrentProductCoordinator: TransitionObserver { func newTransition(transition: Transition) { switch transition.direction { case (.currentProduct, .videoPlayer): ... case (.currentProduct, .photoGallery): ... productController.present(...) case (.currentProduct, .safari): ... } } }
89. • Screen composition reflected in State Navigation State (recap) • Transitions are instantiated via Actions • Need to observe UIKit transitions
90. • Screen composition reflected in State Navigation State (recap) • Transitions are instantiated via Actions • Need to observe UIKit transitions
91. • Screen composition reflected in State Navigation State (recap) • Transitions are instantiated via Actions • Need to observe UIKit transitions
92. UI State
93. • Should we keep separate object for view related details? UI State • What if we need to animate from one state to another?
94. • Should we keep separate object for view related details? UI State • What if we need to animate from one state to another?
95. • Keep elements cached inside view Product Detail Example • Check if something is changed (State diff) • Update only the needed stuff
96. • Keep elements cached inside view Product Detail Example • Check if something is changed (State diff) • Update only the needed stuff
97. • Keep elements cached inside view Product Detail Example • Check if something is changed (State diff) • Update only the needed stuff
98. Product Detail Example final class ProductDetailDataSource { func update( with state: CurrentProductState, tableView: UITableView ) { guard items.isEmpty else { updateMainPhotoIfNeeded(state: state) updateVideoPlayerState(state: state.videoPlayerState) return } items = tableViewModelFactory.createTableViewModels( state: state ) tableView.reloadData() } }
99. Product Detail Example final class ProductDetailDataSource { func update( with state: CurrentProductState, tableView: UITableView ) { guard items.isEmpty else { updateMainPhotoIfNeeded(state: state) updateVideoPlayerState(state: state.videoPlayerState) return } items = tableViewModelFactory.createTableViewModels( state: state ) tableView.reloadData() } }
101. • Everything has a State -> clear and explicit logic Advantages • Easy to broadcast application wide events • State is always synchronised
102. • Everything has a State -> clear and explicit logic Advantages • Easy to broadcast application wide events • State is always synchronised
103. • Everything has a State -> clear and explicit logic Advantages • Easy to broadcast application wide events • State is always synchronised
105. • Navigation can be complex Disadvantages • One store per app is not convenient • Frequent updates can be tricky • Core Data and NSFetchedResultsController not welcomed
106. • Navigation can be complex Disadvantages • One store per app is not convenient • Frequent updates can be tricky • Core Data and NSFetchedResultsController not welcomed
107. • Navigation can be complex Disadvantages • One store per app is not convenient • Frequent updates can be tricky • Core Data and NSFetchedResultsController not welcomed
108. • Navigation can be complex Disadvantages • One store per app is not convenient • Frequent updates can be tricky • Core Data and NSFetchedResultsController not welcomed
110. • Make state based screens Key takeaways • Experiment with Redux-like architectures, but be careful with complex projects • You can use store only for part of the business logic
111. • Make state based screens Key takeaways • You can use store only for part of the business logic • Experiment with Redux-like architectures, but be careful with complex projects
112. • Make state based screens Key takeaways • Experiment with Redux-like architectures, but be careful with complex projects • You can use store only for part of the business logic