Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Redux and ReSwift, SwiftHyderabad

Eeb061c8b2816b771920da1b3e7904a3?s=47 Swift India
January 22, 2018

Redux and ReSwift, SwiftHyderabad

SaiTeja

Eeb061c8b2816b771920da1b3e7904a3?s=128

Swift India

January 22, 2018
Tweet

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