Flux TodoMVC https://github.com/kazu69/todomvc-with-flux-immutable

dir.sh

.
├── index.html
├── css
└── js
    ├── actions
    ├── app.js
    ├── components
    ├── constants
    ├── dispatcher
    └── stores

eventEmitter.js

// EventEmitter
var events = require('events');
var eventEmitter = new events.EventEmitter();

var pizza = function() {
    console.log('pizza');
}

var cola = function() {
    console.log('coca cola');
}

var potato = function() {
    console.log('potato');
}

var chicken = function() {
    console.log('chicken');
}

// event登録
eventEmitter.on('food', pizza);
eventEmitter.on('food', cola);
eventEmitter.on('food', potato);
eventEmitter.once('food', chicken);

// callback実行
eventEmitter.emit('food');

// 全てが実行される
// pizza
// coca cola
// potato
// chicken

// もう一度実行
eventEmitter.emit('food');

// onceは実行されない
// pizza
// coca cola
// potato

flux.Dispatcher.js

// flux.Dispatcher
var Dispatcher = require('flux').Dispatcher;
var exampleDispatcher = new Dispatcher();

exampleDispatcher.register(function(callback) {
    console.log(1);
    console.log(JSON.stringify(callback));
}); 

// 登録するとIDが返却される
// ID_1

exampleDispatcher.register(function(callback) {
    console.log(2);
    console.log(JSON.stringify(callback));
});

// ID_2

// eventをdispatch
exampleDispatcher.dispatch({
    actionType: 'add-action',
    text: 'hoge'
});

// 順番に実行
// 1
// {"actionType":"add-action","text":"hoge"}
// 2
// {"actionType":"add-action","text":"hoge"}

exampleDispatcher.dispatch({
    actionType: 'add-action',
    text: 'huga'
});


var _ids = [];
var _ids2 = [];

exampleDispatcher.register(function(callback) {
    // waitFor: _idsの要素が順に実行されるまで実行を待つ
    exampleDispatcher.waitFor(_ids);
    console.log(1);
    console.log(JSON.stringify(callback));
    console.log('not completed');
    exampleDispatcher.waitFor(_ids2);
    console.log('completed');
});

var id2 = exampleDispatcher.register(function(callback) {
    console.log(2);
    console.log(JSON.stringify(callback));
}); // ID_2

var id3 = exampleDispatcher.register(function(callback) {
    console.log(3);
    console.log(JSON.stringify(callback));
}); // ID_3

var id4 = exampleDispatcher.register(function(callback) {
    console.log(4);
    console.log(JSON.stringify(callback));
}); // ID_4

_ids = [id3, id2];
_ids2 = [id4];

exampleDispatcher.dispatch({
    actionType: 'add-action',
    text: 'wait'
});

// 以下のようになる
// 3
// {"actionType":"add-action","text":"wait"}
// 2
// {"actionType":"add-action","text":"wait"}
// 1
// {"actionType":"add-action","text":"wait"}
// not completed
// 4
// {"actionType":"add-action","text":"wait"}
// completed

Immutable.js

var Immutable = require('immutable');

var x = { foo: "bar" };
var y = x;
y.foo = "baz";
x === y;
console.log(x === y)

// true

var x = Immutable.Map({ foo: "bar" });
var y = x.set({ foo: "baz" });
x === y;
console.log(x === y)

// false

TodoActions.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var TodoConstants = require('../constants/TodoConstants');

var TodoActions = {

    // ....

    toggleComplete: function(todo) {
        var id = todo.id;
        var actionType = todo.complete ?
            TodoConstants.TODO_UNDO_COMPLETE :
            TodoConstants.TODO_COMPLETE;
        AppDispatcher.dispatch({
            actionType: actionType,
            id: id
        });
    },

    // ...
};

module.exports = TodoActions;

TodoItem.react.js

var TodoItem = React.createClass({

    propTypes: {
        todo: ReactPropTypes.object.isRequired
    },

    // ....

    render: function() {
        var todo = this.props.todo.toJS();
        var id = todo.id;
        var complete = todo.complete;
        var text = todo.text;
        var input;

        if (this.state.isEditing) {
            input =
                <TodoTextInput
                    className="edit"
                    onSave={this._onSave}
                    value={todo.text}
                />;
        }

        if (this.state.isEditing) {
            input =
                <TodoTextInput
                    className="edit"
                    onSave={this._onSave}
                    value={text}
                />;
        }

        return (
            <li
                className={cx({
                    'completed': complete,
                    'editing': this.state.isEditing
                })}
                key={id}>
                <div className="view">
                    <input
                        className="toggle"
                        type="checkbox"
                        checked={complete}
                        onChange={this._onToggleComplete}
                    />
                    <label onDoubleClick={this._onDoubleClick}>
                        {text}
                    </label>
                    <button className="destroy" onClick={this._onDestroyClick} />
                </div>
                {input}
            </li>
        );
    },

    // ...

module.exports = TodoItem;

TodoStore.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var TodoConstants = require('../constants/TodoConstants');
var assign = require('object-assign');
var Immutable = require('immutable');

// ...

function update(id, data) {
    var todo = _todos[id];
    if(data.text !== undefined) {
        _todos[id] = todo.update('text', function(val) { return data.text });
    }
    if(data.complete) _todos[id] = todo.update('complete', function(val) { return data.complete });
    _todos;
}

// ...

// callback登録
AppDispatcher.register(function(action) {
    var text;
    switch(action.actionType) {

        // ...

        case TodoConstants.TODO_COMPLETE:
            update(action.id, {complete: true});
            TodoStore.emitChange();
            break;

        case TodoConstants.TODO_UNDO_COMPLETE:
            update(action.id, {complete: false});
            TodoStore.emitChange();
            break;

        // ...

        default:
            return;
    };
});

module.exports = TodoStore;