What's Redux?

"a predictable state container for JavaScript apps"

• redux.js.org

"Awesome"

• Cabcharge Plus

An implementation of the Flux architecture

Small library with:

• Single Application state
• One way data Flow
• Amazing Tooling

Three main concepts:

• Store: The single source of truth for your application state
• Actions: Events, raised in response to something happening in your application
• Reducers: Pure, immutable functions working against the store in response to actions

The importance of immutability

function mutableSetName (state, name) {
    state.name = arguments.name; 
    return state;
}

vs:

function immutableSetName (state, name) {
    return Object.assign({}, state, { name });
}

• Side effect free functions are really easy to test
• Immutable functions are easy to reason about
• Pure functions are repeatable

All of which help to...

Enable time travel

Why?

Why Not? (It is shiny after all...)

As application size grows so does complexity

Large components are often SRP violators

Managing communication between lots of components can be a real pain

Testing...

How does redux help?

Single Source of truth

Uni directional data Flow

Immutable data

Pure functions are dreamy

Some Code

Coming soon - Sorry!

Tooling

• Dev Tools Extension
• Dev Tools

Resources

• redux.js.org - Documentation, examples, walkthroughs
• Getting started with Redux - Dan Abramov's 30 free egghead videos