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.
14. None

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