Redux

http://rackt.github.io/redux/

// TODO:

• Design of Redux
• Philosophy of Redux
• Building with Redux

"Redux is a predictable state container for JavaScript"

State

Components and stuff

Subscription

State

Components and stuff

Subscription

Action

Reducers

Dispatch

There is no store management or dispatch registration boilerplate, only reducers and actions

So, instead of doing this:

import dispatcher from '../dispatcher.js';
import { Store } from 'some-flux-lib';

class ThingsStore extends Store {

  constructor(dispatcher) {
    super(dispatcher);
    this._things = [];
    dispatcher.register(this.onDispatch.bind(this));
  }

  get things() {
    return this._things;
  }

  addThing(thing) {
    this._things.push(things);
    this.notify();
  }

  onDispatch({ type, payload }) {
    switch(type) {
      case 'ADD_THING':
        this.addThing(payload);
        break;
    }
  }
}

export default new ThingsStore(dispatcher);

And this:

import React from 'react';
import ThingsStore from '../ThingsStore.js';
import dispatcher from '../dispatcher.js';

export default React.createClass({

  getInitialState() {
    return { things: ThingsStore.things };
  },

  onChange() {
    this.setState({ things: ThingsStore.things });
  },

  componentDidMount() {
    ThingsStore.addChangeListener(this.onChange);
  },

  componentWillUnmount() {
    ThingsStore.removeChangeListener(this.onChange);
  },

  renderList() {
    return this.state.things.map((thing) => (
      <li key={thing.id}>{thing.name}</li>
    ));
  },

  addThing() {
    dispatcher.dispatch({ 
      type: 'ADD_THING',
      payload: { id: Math.random(), name: 'New Thing' }
    });
  },

  render() {
    return <div>
        <button onClick={this.addThing}>Add</button>
        <ul>{this.renderList()}</ul>
    </div>;
  }
});
            

We can do this:

import { combineReducers } from 'redux';

export function addThing(thing) {
  return { type: 'ADD_THING', payload: thing };
}

function things(state = [], { type, payload }) {
  switch(type) {
    case 'ADD_THING':
      return state.concat(payload);
    default:
      return state;
  }
}

export default combineReducers({
  things
});

And this:

import { connect } from 'react-redux';
import { addThing } from '../state.js';

const connector = connect(
  (state) => state,
  { addThing }
);

function ThingsList({ things, addThing }) {
  
  const list = things.map((thing) => (
    <li key={thing.id}>{thing.name}</li>
  ));

  return (
    <div>
      <button onClick={addThing}>Add</button>
      <ul>{list}</ul>
    </div>
  );
}

export default connector(ThingsList);

State

Components and stuff

Subscription

Action

Reducers

Dispatch

The reducer signature

function (accumulator, nextValue) {

}

State is not a bunch of models, collections, and event notifications happening all over the place

It is an accumulation of updates over time.

Using Redux 101