Redux and ReSwift, SwiftHyderabad

SaiTeja

Transcript

1. Redux & ReSwift Sai Teja J. - @tsjamm Senior Software Engineer
2. Quick Agenda 1. State Machine 2. What is Redux (and Flux) 3. What is ReSwift 4. ReSwift Example 5. Where is it useful? 6. Resources
3. State Machine
4. A Simple Example States: • On • Off Actions: • Flip Up • Flip Down
5. A Less Simpler Example States: • Main Green • Main Yellow • Side Green • Side Yellow Actions: • Main Road Green Timer • Main Road Yellow Timer • Side Road Green Timer • Side Road Yellow Timer
6. Redux (Based off FLUX from Facebook)
7. Flux • Flux is the application architecture that Facebook uses for building client-side web applications. • It complements React's composable view components by utilizing a unidirectional data flow. • It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code. • Flux applications have three major parts: the dispatcher, the stores, and the views (React components).
8. Dan Abramov https://www.youtube.com/watch?v=uvAXVMwHJXU The Redux Journey at react-europe 2016 Dan Abramov created Redux based on Flux
9. Redux (1/2) • Redux is a predictable state container for JavaScript apps. • It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. • The whole state of your app is stored in an object tree inside a single store. • The only way to change the state tree is to emit an action, an object describing what happened. • To specify how the actions transform the state tree, you write pure reducers.
10. Redux (2/2)
11. ReSwift (No, we are not re-inventing swift)
12. ReduxKit • ReduxKit is a swift implementation of the JavaScript Redux library by Dan Abramov • ReduxKit stays as close as possible to Redux while bringing in Swift ways of doing things where appropriate. Aleksander Herforth Rendtslev - @arendtslev Karl Bowden - @karlbowden
13. SwiftFlow • Swift Flow is a Redux-like implementation of the unidirectional data flow architecture in Swift. • It embraces a unidirectional data flow that only allows state mutations through declarative actions. Benjamin Encz - @benjaminencz
14. ReSwift (1/3) ReSwift is a Redux-like implementation of the unidirectional data flow architecture in Swift. https://github.com/ReSwift/ReSwift The ReSwift library is tiny - allowing users to dive into the code, understand every single line ReSwift helps you to separate three important concerns of your app's components:
15. ReSwift (2/3) 1. State: in a ReSwift app the entire app state is explicitly stored in a data structure. This helps avoid complicated state management code, enables better debugging 2. Views: in a ReSwift app your views update when your state changes. Your views become simple visualizations of the current app state. 3. State Changes: in a ReSwift app you can only perform state changes through actions. Actions are small pieces of data that describe a state change. By drastically limiting the way state can be mutated, your app becomes easier to understand and it gets easier to work with many collaborators.
16. ReSwift (3/3)
17. Example
18. Example (1/3) // State struct AppState: StateType { var counter: Int = 0 } // Actions struct IncreaseAction: Action {} struct DecreaseAction: Action {} struct ResetAction: Action {} // Store let mainStore = Store<AppState>( reducer: counterReducer, state: AppState() )
19. Example (2/3) // The Counter Reducer func counterReducer(action: Action, state: AppState?) -> AppState { // Here state is a value type, hence when assigned, it is copied var state = state ?? AppState() switch action { case _ as IncreaseAction: state.counter += 1 case _ as DecreaseAction: state.counter -= 1 case _ as ResetAction: state = AppState() Default: () } return state }
20. Example (3/3) class ViewController: UIViewController { @IBOutlet weak var counterLabel: UILabel! override func viewWillAppear(_ animated: Bool) { mainStore.subscribe(self) } override func viewWillDisappear(_ animated: Bool) { mainStore.unsubscribe(self) } @IBAction func onResetTap(_ sender: Any){ mainStore.dispatch(ResetAction()) } @IBAction func onIncTap(_ sender: Any){ mainStore.dispatch(IncreaseAction()) } @IBAction func onDecTap(_ sender: Any){ mainStore.dispatch(DecreaseAction()) } } extension ViewController: StoreSubscriber { func newState(state: AppState) { counterLabel.text = "\(state.counter)" } }
21. A Simple ReSwift Demo
22. Why?
23. Why ReSwift? 1. Improved Dataflow Direction 2. Apple Platform Independent (iOS, tvOS, macOS) 3. Collaboration - Use ReSwift Recorder to record events and send
24. Benefits (1/2)
25. Benefits (2/2)
26. Resources: https://facebook.github.io/flux/docs/in-depth-overview.html http://redux.js.org/ https://github.com/ReSwift/ReSwift
27. Questions? Reach me at: Twitter - https://twitter.com/tsjamm LinkedIn - https://www.linkedin.com/in/tsjamm/ Github - https://github.com/tsjamm