Vision of Flux

_action.js

// Action signature should be descriptive so IDE could use it.
var actionSet = createActions({
  /**
   * @param {object} data
   * @param {string} data.name
   * @param {string} data.value
   */ 
  a: function actionMiddleware(data) {
    // Case validate data
    if (validate(data)) {
      throw new TypeError();
    }
    
    // Case forward action
    if (forwardAction) {
      this.cancelAction();
      actionSet.b({
        name: data.name
      });
      return;
    }
    
    if (wait) {
      this.cancelAction();
      delayPromise(1000).then(actionSet.a);
      return;
    }
    
    if (doNotDispatchAction) {
      this.cancelAction();
      return;
    }
  },
  /**
   * @param {object} data
   * @param {string} data.name
   */ 
  b: function (data) {}
});

_component.jsx

var Status = React.createClass({
    mixins: [ListenToMixin],
    componentDidMount: function() {
        this.listenTo(store, this.onStatusChange);
    },
    onStatusChange: function(status) {
        this.setState({
            status: status
        });
    },
    renderList: function () {
        return this.state.status.a.map(function (item) {
            return <li>{item}</li>
        });
    },
    render: function() {
        return <ul>{this.renderList}</ul>;
    }
});

_store.js

var store = createStore({
    // The same as #componentDidMount
    initialize: function () {
        this.listenTo(actionSet.a); // (actionSet.a, this.onA)
        this.listenToAll(actionSet2);
    },
    
    // Event listenter
    onA: function (data) {
        // the same as #setState
        this.set({
            a: this.state.a.concat(data.item),
            b: Math.max(data.age, this.state.b)
        });
    },
    
    // The same as #getInitialState
    defaults: function () {
        return {
            a: [],
            b: 2
        };
    },
    
    // Same as #render() but for data
    emit: function () {
        return {
            a: this.state.a,
            isEmpty: this.state.a.length === 0,
            b: this.state.b * 2
        };
    }
});