Managing App State with Redux

Transcript

1. REDUX MANAGING APP STATE WITH
2. I’M SIMON. I write JavaScript and React. Once someone let me work in Silicon Valley for a liDle while. My mom says I’m preDy good at “computer stuff”. github.com/sstur @sstur_
3. WHAT IS REDUX? ▸ Redux is a design paDern for managing state using unidirecQonal data flow. ▸ Helps you build apps that are more predictable, more testable and more debuggable. ▸ It’s an evoluQon of the ideas behind “Flux”
4. FLUX LET’S FIRST TALK ABOUT
5. SO WHAT, THEN, IS FLUX? ▸ Flux is a design paDern that became popular in 2014 ▸ It’s an alternaQve to MVC that came out of the React community. ▸ Designed to reduce complexity in your applicaQon by enforcing “unidirecQonal data flow”.
6. * shamelessly li+ed from @jingc’s original Flux presenta;on.
7. COMPLEXITY ▸ MVC and two-way data binding explodes in complexity as number of views and models increases. ▸ Events can cause changes that fire other events. ▸ Models need to update other models. ▸ Mutability everywhere!
8. HOW DOES FLUX SIMPLIFY THINGS? ▸ Data store(s) do NOT have seDers. ▸ The only way to change a store is to fire an ACTION ▸ Every Qme the store changes, the view should update.
9. BANK ACCOUNT ANALOGY
10. BANK ACCOUNT ANALOGY
11. DETERMINISTIC STATE BECOMES
12. DETERMINISTIC STATE ‣ Given the same iniQal state, if you replay the same acQons you arrive at the SAME state! ‣ apply(iniQalState, …acQons) => finalState ‣ Your UI becomes more testable, debuggable and easier to reason about!
13. WHAT HAPPENED NEXT ‣ Flux is just a design paDern, so… ‣ 2014 saw dozens of Flux implementaQons from Fluxxor to Flummox to Marty.js and McFly. ‣ Everyone had their own variaQon on the concepts behind Flux. InnovaQon was happening all around.
15. REDUX LET’S TALK ABOUT
16. REDUX - RETHINKING FLUX ▸ It takes Flux and adds some funcQonal programming concepts.
 (Redux is a Portmanteau of “Reducer” + “Flux”) ▸ Single immutable State Tree for your enQre applicaQon! ▸ Redux is small (~50 LOC), simple API. ▸ Inspired by Elm.
17. HOW DOES REDUX WORK ▸ You have a “reducer” which is a plain funcQon: ▸ (state, acQon) => newState ▸ You call redux.createStore(reducer) ▸ store has “subscribe()”, “dispatch()” and “getState()” ▸ That’s it. * technically, there’s middleware also.
18. REDUX EXAMPLE
19. REDUCERS ARE SIMPLE, PURE FUNCTIONS
20. CURRENT STATE ACTION REDUCER NEW STATE EASY TO REASON ABOUT
21. REDUX: 3 CORE PRINCIPLES ▸ Single Source of Truth (store) ▸ State is immutable (acQons) ▸ Updates are done with pure funcQons (reducers)
22. ADVANTAGES ▸ Test all the things! ▸ Undo/redo essenQally for free (immutable for the win!) ▸ Compose reducers to form deeply nested state objects. ▸ Hot module reloading: simply reload and replay all the acQons! ▸ Debugging: see which sequence of acQons got you to an erroneous state.
23. PUTTING THINGS TOGETHER HOW WILL REDUX FIT IN TO MY EXISTING FRONT-END STACK?
24. REDUX IS VIEW-LAYER AGNOSTIC ▸ Redux can fit in with almost any view layer, but it works best with views that are “a funcQon of state” like React. ▸ render(state) => UI ▸ … but there are bindings out there for everything from Backbone to Vue.js to Angular.
25. MIGRATION PATH ▸ If you can isolate and rewrite a component of your applicaQon then you can use Redux for that component today. ▸ If you are using React + an older implementaQon of Flux, it should be an easy migraQon path. ▸ If you have a greenfield project, then you should seriously consider using Redux from day 1!
26. REAL WORLD STUFF WHAT ABOUT ASYNC AND DATA FETCHING?
27. ASYNC OPERATIONS ▸ Redux is so simple, yet so powerful: ▸ Dispatching Promises ▸ Middleware ▸ Thunks ▸ Sagas ▸ ... there are many great paDerns that could each be an enQre presentaQon.
28. “REDUX THUNK TEACHES REDUX TO RECOGNIZE SPECIAL KINDS OF ACTIONS THAT ARE IN FACT FUNCTIONS” @dan_abramov Async Actions using Thunks see http://j.mp/async-redux-actions
29. WHERE TO GO FROM HERE ▸ Watch all the mini-episodes about Redux on egghead.io (free from the creator of Redux) ▸ Check out the docs at redux.js.org ▸ Build something. Use Redux. ▸ Follow all the cool stuff that is happening in front-end dev right now!
30. THANKS FOR LISTENING! MY SON WHO IS VERY EXCITED ABOUT REDUX. I’ll put these slides up on speakerdeck.com/sstur Catch me occasionally twiDering on the TwiDer @sstur_ Or open sourcing spaghep code at
 github.com/sstur