Slide 1

Slide 1 text

REDUX MANAGING APP STATE WITH

Slide 2

Slide 2 text

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_

Slide 3

Slide 3 text

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”

Slide 4

Slide 4 text

FLUX LET’S FIRST TALK ABOUT

Slide 5

Slide 5 text

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”.

Slide 6

Slide 6 text

* shamelessly li+ed from @jingc’s original Flux presenta;on.

Slide 7

Slide 7 text

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!

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

BANK ACCOUNT ANALOGY

Slide 10

Slide 10 text

BANK ACCOUNT ANALOGY

Slide 11

Slide 11 text

DETERMINISTIC STATE BECOMES

Slide 12

Slide 12 text

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!

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

REDUX LET’S TALK ABOUT

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

REDUX EXAMPLE

Slide 19

Slide 19 text

REDUCERS ARE SIMPLE, PURE FUNCTIONS

Slide 20

Slide 20 text

CURRENT STATE ACTION REDUCER NEW STATE EASY TO REASON ABOUT

Slide 21

Slide 21 text

REDUX: 3 CORE PRINCIPLES ▸ Single Source of Truth (store) ▸ State is immutable (acQons) ▸ Updates are done with pure funcQons (reducers)

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

PUTTING THINGS TOGETHER HOW WILL REDUX FIT IN TO MY EXISTING FRONT-END STACK?

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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!

Slide 26

Slide 26 text

REAL WORLD STUFF WHAT ABOUT ASYNC AND DATA FETCHING?

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

“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

Slide 29

Slide 29 text

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!

Slide 30

Slide 30 text

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