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”
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”.
as number of views and models increases. ▸ Events can cause changes that fire other events. ▸ Models need to update other models. ▸ Mutability everywhere!
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!
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.
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.
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.
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.
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.
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!
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!
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