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

Managing App State with Redux

Managing App State with Redux

A01b931867096ec8874202e233279212?s=128

Simon Sturmer
PRO

May 25, 2016
Tweet

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