Games have complex state that changes frequently based on simulations rules and user input.

Games mange updating state via a game loop:

• Starting state
• Gather user input
• Update state based on user input and simulation rules
• Render visual representation to screen
• Rinse, wash, repeat - 60 times a second!

Can we write web apps the way we write games?

Enter React.js

Unlike other MV* frameworks since Backbone, React is a game changer because it lets us write web apps the way we write games. We can throw a new state at the DOM as often as we please.

This means we need to think about building applications differently.

It's the data flow that matters.

(The UI is a side effect; your app should be able to run from the command line.)

How do we control data flow?

FLUX

"Flux eschews MVC in favor of a unidirectional data flow"

Before:

After:

Unidirectional flow:

Back to redux

Redux is a pure, functional implementaiton of flux

(state, action) -> state

• Redux doesn't have a Dispatcher or support many stores. Instead, there is just a single store with a single root reducing function.

• As your app grows, instead of adding stores, you split the root reducer into smaller reducers independently operating on the different parts of the state tree.

• By using only pure functions, everything is predictable

Let's see some code

// The reducer
function counter(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
        return state + action.amount;
    case 'DECREMENT':
        return state - action.amount;
    default:
        return state;
    }
}

// The store bound with your reducer
let store = Redux.createStore(counter);

// Side effects (this is where you could pass your data into react)
store.subscribe(() =>
    console.log(store.getState())
);

// Send some actions
store.dispatch({ type: 'INCREMENT', amount: 1 });
// 1
store.dispatch({ type: 'INCREMENT', amount: 3 });
// 4
store.dispatch({ type: 'DECREMENT', amount: 2 });
// 2

Why Redux?

• Single source of truth
• Consistent and portable

• You can specify the behavior of your app before even starting to write the UI.

• Complexity through composition

More reasons:

• Smart people (including the creators of Flux) think it's the right direction
• Intuitive and decoupled
• Benefits of pure functional programming (easy to test, "time traveling debuggers", reproducible sessions, etc)
• This isn't new, the paradigm has been around for over 40 years
• Simple, only 2kb.

Using Redux with React

• Use redux-react helper to facilitation binding
• Recommend passing relevant nodes of state into "smart" root-components, that pass props down to "dumb" middle/leaf components
• UI hierarchy matches state hierarchy

What about async?

Middleware

Chainable dispatch plug-ins allowing you to inject behavior between receiving and action and processing it.

A useful place for side-effects - like logging... or making async requests!

Async flow:

• User-generated action pass into your middleware
• Your middleware detects a server request is necessary
• It fires off the async request and sets a "fetching" flag in the store
• The view updates to the fetching flag by showing a spinner

When the ajax request returns:

• The response generates a new action with the new data
• The store gets updated and the fetching flag is turned off
• The views can render the data

Links / resources

• Great docs - http://rackt.github.io/redux/
• Awesome redux - https://github.com/xgrommx/awesome-redux