Flux demo

action.js

'use strict';

var dispatcher = require('flux').dispatcher;

exports.load = function () {
  dispatcher.dispatch('LOAD', {
    foo: 'bar'
  });
};

components.jsx

'use strict';

var React = require('react');
var MyStore = require('../stores').MyStore;
var load = require('actions').load;

var MyComp = React.createClass({
  getInitialState: function () {
    return MyStore.getState();
  },

  handleStoreChange: function () {
    var storeState = MyStore.getState();
    this.setState({
      foo: storeState.foo
    });
  },

  componentDidMount: function () {
    MyStore.onChange(this.handleStoreChange);
  },

  componentWillUnmount: function () {
    MyStore.removeListener(this.handleStoreChange);
  },

  fetchData: function () {
    load();
  },

  render: function () {
    return (
      <div>
        <div>{this.state.foo || ''}</div>
        <a onClick={this.fetchData}>Fetch</a>
      </div>
    );
  }
});

module.exports = MyComp;

stores.js

'use strict';

var _ = require('lodash');
var EventEmitter = require('events').EventEmitter;
var dispatcher = require('flux').dispatcher;

var CHANGE_EVENT = 'CHANGE';

// this is ugly
// util.createStore
exports.MyStore = _.merge({}, EventEmitter.prototype, {
  state: {},

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  onChange: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  removeListener: function (callback) {
    this.removeListener(CHANGE_EVENT, callback);
  },

  handleAction: dispatcher.register(function (action, payload) {
    switch (action) {
      case 'LOAD':
        this.state = payload;
        break;
      default:
        return;
    }
    this.emitChange();
  })

  getState: function () {
    return this.state;
  }
});