$30 off During Our Annual Pro Sale. View Details »

Redux Your Flux

Redux Your Flux


July 25, 2016

More Decks by r31gN_

Other Decks in Technology


  1. None
  2. Redux your Flux

  3. About me: Vlad “Reign” Zelinschi UI Tech Lead @ 3PillarGlobal

    @r31gN_ on Twitter
  4. None
  5. Model Model Model Model View View View View

  6. None
  7. None
  8. “Application architecture for building user interfaces.” Facebook

  9. Flux • An event driven (kinda) communication pattern (not a

    framework) • It’s not “React specific” but they do complement each other • Proposes a unidirectional data flow model
  10. Action Dispatcher Store View

  11. Action Dispatcher Store View Event (data) flow - Left to

  12. Action Dispatcher Store View 1. User clicks a button 2.

    A request is made (this triggers the creation of an ACTION) 3. An ACTION is a JS object (type, payload)
  13. None
  14. Action Dispatcher Store View 1. The DISPATCHER is a callback

    registry 2. It broadcasts the ACTION in the entire system
  15. None
  16. Action Dispatcher Store View 1. STORES contain application state and

    logic 2. STORES register themselves with the dispatcher and provide callbacks for different action types 3. After logic is executed, STORES broadcast an event declaring the state has changed
  17. None
  18. None
  19. Action Dispatcher Store View You can have MULTIPLE STORES Store

  20. Action Dispatcher Store View 1. VIEWS are your React components

    2. VIEWS listen to STORES emitted events 3. When the event happens, VIEWS query the STORE for new data and re-render
  21. None
  22. None
  23. Reflux Fluxxor Redux etc.

  24. Redux

  25. “Predictable state container for JavaScript applications.”

  26. “[..] goal was to create a state management library with

    minimal API but completely predictable behavior, so it is possible to implement logging, hot reloading, time travel, universal apps, record and replay, without any buy-in from the developer.”
  27. Redux principles • Single source of truth - the state

    of your whole application is stored in an object tree within a single store. • State is read-only - the only way to mutate the state is to emit an action, an object describing what happened. • Changes are made with pure functions - to specify how the state tree is transformed by actions, you write pure reducers.
  28. Action Dispatcher Store View Store Store Store FLUX

  29. Action Dispatcher Store View Store Store Store REDUX Reducers

  30. None
  31. Redux pros • Single store - easy management and reasoning

    with regards to the application’s state • Simplicity (clear data flow) • Predictability (because of reducers being pure functions - they only compute the next state) • Easily testable
  32. Redux cons • Redux makes assumptions - it assumes you

    always write pure reducers, which puts the worry on the developer itself to make sure he never breaks things • Pretty functional in approach (different paradigm) • Memory intensive? (a single store) • Single store - an all or nothing tradeoff
  33. Q&A anyone?

  34. “Keep on smiling. You are the most beautiful people when

    you do.” Reign
  35. Thank you! @r31gN_