Redux Your Flux

Transcript

2. Redux your Flux
3. About me: Vlad “Reign” Zelinschi UI Tech Lead @ 3PillarGlobal @r31gN_ on Twitter
5. Model Model Model Model View View View View
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 Right
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)
14. Action Dispatcher Store View 1. The DISPATCHER is a callback registry 2. It broadcasts the ACTION in the entire system
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
19. Action Dispatcher Store View You can have MULTIPLE STORES Store 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
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
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_