Reflux是根据React的flux创建的单向数据流类库。
Reflux的单向数据流模式主要由actions和stores组成。例如，当组件list新增item时，会调用actions的某个方法（如addItem(data)）,并将新的数据当参数传递进去，通过事件机制，数据会传递到stroes中，stores可以向服务器发起请求，并更新数据数据库。数据更新成功后，还是通过事件机制传递的组件list当中，并更新ui。整个过程的对接是通过事件驱动的。就像这样：

╔═════════╗       ╔════════╗       ╔═════════════════╗

║ Actions ║──────>║ Stores ║──────>║ View Components ║

╚═════════╝       ╚════════╝       ╚═════════════════╝

     ^                                      │

     └──────────────────────────────────────┘

代码看起来像这样的：

var TodoActions = Reflux.createActions([

    'addItem'

]);

var TodoStore = Reflux.createStore({

    items: [1, 2],

    listenables: [TodoActions],

    onAddItem: function (model) {

        $.post('/server/add', {data: model}, function (data) {

            this.items.unshift(data);

            this.trigger(this.items);

        });

    }

});

var TodoComponent = React.createClass({

    mixins: [Reflux.listenTo(TodoStore, 'onStatusChange')],

    getInitialState: function () {

        return {list: []};

    },

    onStatusChange: function () {

        this.setState({list: TodoStore.items});

    },

    render: function () {

        return (

            <div>

                {this.state.list.map(function (item) {

                    return <p>{item}</p>

                })}

            </div>

        )

    }

});

React.render(<TodoComponent />, document.getElementById('container'));

同React Flux比较

相同点

• 有actions
• 有stores
• 单向数据流

不同点

• 通过内部拓展actions的行为，移除了单例的dispatcher
• stores可以监听actions的行为，无需进行冗杂的switch判断
• stores可以相互监听，可以进行进一步的数据聚合操作，类似于，map/reduce
• waitFor被连续和平行的数据流所替代

创建Action

var statusUpdate = Reflux.createAction(options);

返回值是一个函数，调用这个函数就会触发相应的事件，在store中监听这个函数，并作相应的处理

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(addItem, 'addItem');

    },

    addItem: function (model) {

        console.log(model);

    }

});

addItem({name: 'xxx'});

创建多个Action

var TodoActions = Reflux.createActions([

    'addItem',

    'deleteItem'

]);

store监听actions的行为：

var TodoActions = Reflux.createActions([

    'addItem',

    'deleteItem'

]);

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(TodoActions.addItem, 'addItem');

        this.listenTo(TodoActions.deleteItem, 'deleteItem');

    },

    addItem: function (model) {

       console.log(model)

    },

    deleteItem:function(model){

        console.log(model);

    }

});

TodoActions.addItem({name:'xxx'});

TodoActions.deleteItem({name:'yyy'});

异步Action

真实的应用场景中，几乎所有的操作都会向后端请求，而这些操作都是异步的，Reflux也提供了相应的Promise接口

var getAll = Reflux.createAction({asyncResult:true});

例如获取全部数据：

var getAll = Reflux.createAction({asyncResult: true});

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(getAll, 'getAll');

    },

    getAll: function (model) {

        $.get('/all', function (data) {

            if (data) {

                getAll.completed(data);

            } else {

                getAll.failed(data);

            }

        });

    }

});

getAll({name: 'xxx'})

    .then(function (data) {

        console.log(data);

    })

    .catch(function (err) {

        throw err;

    });

Action hooks

Reflux为每个action都提供了两个hook方法

• preEmit(params)，action emit之前调用，参数是action传递过来的，返回值会传递给shouldEmit
• shouldEmit(params) action emit之前调用，参数默认是action传递，如果preEmit有返回值，则是preEmit返回值，返回值决定是否emit

情景一：

var addItem = Reflux.createAction({

    preEmit: function (params) {

        console.log('preEmit:' + params);

    },

    shouldEmit: function (params) {

        console.log('shouldEmit:' + params);

    }

});

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(addItem, 'addItem');

    },

    addItem: function (params) {

        console.log('addItem:' + params);

    }

});

addItem('xxx');

控制台打印

$ preEmit:xxx

$ shouldEmit:xxx

情景二：

var addItem = Reflux.createAction({

    preEmit: function (params) {

        console.log('preEmit:' + params);

        return 324;

    },

    shouldEmit: function (params) {

        console.log('shouldEmit:' + params);

        return true;

    }

});

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(addItem, 'addItem');

    },

    addItem: function (params) {

        console.log('addItem:' + params);

    }

});

addItem('xxx');

控制台打印

$ preEmit:xxx

$ shouldEmit:324

$ addItem:324

注意几个返回值和参数的关系

Action Methods

当需要给所有的action添加公用方法时，可以这么干：

Reflux.ActionMethods.print = function (str) {

    console.log(str);

};

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(addItem, 'addItem');

    },

    addItem: function (params) {

        console.log('addItem:' + params);

    }

});

addItem.print('xxx');

trigger、triggerAsync和triggerPromise

直接调用addItem()实际上是调用trigger或者triggerAsync或者triggerPromise，它们区别在于

var addItem = Reflux.createAction(); addItem();                 #默认调用triggerAsync，相当于addItem.triggerAsync()

var addItem = Reflux.createAction({sync:true});addItem();       #默认调用trigger，相当于addItem.trigger()

var addItem = Reflux.createAction({asyncResult:true});addItem();#默认调用triggerPromise，相当于addItem.triggerPromise()

trigger和triggerAsync区别在于：

triggerAsync = setTimeout(function () {

    trigger()

}, 0);

trigger和triggerPromise区别在于，triggerPromise的返回值是promise

创建Store

Store可以响应Action的行为，并同服务器交互。

监听单个Action

在init方法中添加监听处理

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(addItem, 'addItem');

    },

    addItem: function (model) {

        console.log(model);

    }

});

addItem({name: 'xxx'});

监听多个Action

作死写法

var TodoActions = Reflux.createActions([

    'addItem',

    'deleteItem'

]);

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(TodoActions.addItem, 'addItem');

        this.listenTo(TodoActions.deleteItem, 'deleteItem');

    },

    addItem: function (model) {

        console.log(model);

    },

    deleteItem: function (model) {

        console.log(model);

    }

});

TodoActions.addItem({name: 'xxx'});

TodoActions.deleteItem({name: 'yyy'});

两个action的时候在init里写了两遍监听处理方法，如果有十个甚至多个的话，写起来就像这样的：

var TodoActions = Reflux.createActions([

    'item1',

    'item2',

    'item3',

    'item4',

    'item5',

    'item6',

    'item7',

    'item8',

    'item9',

    'item10'

]);

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(TodoActions.item1, 'item1');

        this.listenTo(TodoActions.item2, 'item2');

        this.listenTo(TodoActions.item3, 'item3');

        this.listenTo(TodoActions.item4, 'item4');

        this.listenTo(TodoActions.item5, 'item5');

        this.listenTo(TodoActions.item6, 'item6');

        this.listenTo(TodoActions.item7, 'item7');

        this.listenTo(TodoActions.item8, 'item8');

        this.listenTo(TodoActions.item9, 'item9');

        this.listenTo(TodoActions.item10, 'item10');

    },

    item1: function (model) {

        console.log(model);

    },

    item2: function (model) {

        console.log(model);

    }

});

TodoActions.item1({name: 'xxx'});

TodoActions.item2({name: 'yyy'});

listenToMany

还好Reflux给我们提供了listenToMany方法，避免重复劳动：

var TodoActions = Reflux.createActions([

    'item1',

    'item2',

    'item3',

    'item4',

    'item5',

    'item6',

    'item7',

    'item8',

    'item9',

    'item10'

]);

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenToMany(TodoActions);

    },

    onItem1: function (model) {

        console.log(model);

    },

    onItem2: function (model) {

        console.log(model);

    }

});

TodoActions.item1({name: 'xxx'});

TodoActions.item2({name: 'yyy'});

处理方法只需让action的标识首字母大写并加上on就可以了。

标识如果首字母大写就会识别不了，例如将上面的item1改成Itme1。这坑爹的！

listenables

var TodoActions = Reflux.createActions([

    'item1',

    'item2',

    'item3',

    'item4',

    'item5',

    'item6',

    'item7',

    'item8',

    'item9',

    'item10'

]);

var TodoStore = Reflux.createStore({

    listenables: [TodoActions],

    onItem1: function (model) {

        console.log(model);

    },

    onItem2: function (model) {

        console.log(model);

    }

});

TodoActions.item1({name: 'xxx'});

TodoActions.item2({name: 'yyy'});

一般我们写真实应用的时候都应该采用这种写法！！！

Store Methods

拓展Store的公用方法有两种方式。

方式一

Reflux.StoreMethods.print = function (str) {

    console.log(str);

};

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({

    init: function () {

        this.listenTo(addItem, 'addItem');

    },

    addItem: function (model) {

        console.log(model);

    }

});

TodoStore.print('rrr');

方式二

var Mixins = {

    print: function (str) {

        console.log(str);

    }

}

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({

    mixins: [Mixins],

    init: function () {

        this.listenTo(addItem, 'addItem');

    },

    addItem: function (model) {

        console.log(model);

    }

});

TodoStore.print('rrr');

同组件结合

前面说了，Action、Store和组件这三者是通过事件机制响应变化的，构建组件的时候首先需要监听Store的状态。
先定义Action和Store

var TodoActions = Reflux.createActions([

    'getAll'

]);

var TodoStore = Reflux.createStore({

    items: [1,2,3],

    listenables: [TodoActions],

    onGetAll: function () {

        this.trigger(this.items);

    }

});

基本

var TodoComponent = React.createClass({

    getInitialState: function () {

        return {list: []};

    },

    onStatusChange: function (list) {

        this.setState({list: list});

    },

    componentDidMount: function () {

        this.unsubscribe = TodoStore.listen(this.onStatusChange);

        TodoActions.getAll();

    },

    componentWillUnmount: function () {

        this.unsubscribe();

    },

    render: function () {

        return (

            <div>

                {this.state.list.map(function (item) {

                    return <p>{item}</p>

                })}

            </div>

        )

    }

});

React.render(<TodoComponent />, document.getElementById('container'));

这里有两点需要注意：

• 当组件的生命周期结束时需要解除对Store的监听
• 当Store调用trigger时，才会执行onStatusChange函数，所以每次Store更新时，需要手动调用trigger函数

Mixins

var TodoComponent = React.createClass({

    mixins: [Reflux.ListenerMixin],

    getInitialState: function () {

        return {list: []};

    },

    onStatusChange: function (list) {

        this.setState({list: list});

    },

    componentDidMount: function () {

        this.unsubscribe = TodoStore.listen(this.onStatusChange);

        TodoActions.getAll();

    },

    render: function () {

        return (

            <div>

                {this.state.list.map(function (item) {

                    return <p>{item}</p>

                })}

            </div>

        )

    }

});

React.render(<TodoComponent />, document.getElementById('container'));

Reflux.listenTo

var TodoComponent = React.createClass({

    mixins: [Reflux.listenTo(TodoStore,'onStatusChange')],

    getInitialState: function () {

        return {list: []};

    },

    onStatusChange: function (list) {

        this.setState({list: list});

    },

    componentDidMount: function () {

        TodoActions.getAll();

    },

    render: function () {

        return (

            <div>

                {this.state.list.map(function (item) {

                    return <p>{item}</p>

                })}

            </div>

        )

    }

});

React.render(<TodoComponent />, document.getElementById('container'));

Reflux.connect

var TodoComponent = React.createClass({

    mixins: [Reflux.connect(TodoStore,'list')],

    getInitialState: function () {

        return {list: []};

    },

    componentDidMount: function () {

        TodoActions.getAll();

    },

    render: function () {

        return (

            <div>

                {this.state.list.map(function (item) {

                    return <p>{item}</p>

                })}

            </div>

        )

    }

});

React.render(<TodoComponent />, document.getElementById('container'));

数据会自动更新到state的list当中。

Reflux.connectFilter

var TodoComponent = React.createClass({

    mixins: [Reflux.connectFilter(TodoStore, 'list', function (list) {

        return list.filter(function (item) {

            return item > 1;

        });

    })],

    getInitialState: function () {

        return {list: []};

    },

    componentDidMount: function () {

        TodoActions.getAll();

    },

    render: function () {

        return (

            <div>

                {this.state.list.map(function (item) {

                    return <p>{item}</p>

                })}

            </div>

        )

    }

});

React.render(<TodoComponent />, document.getElementById('container'));

对数据加了一层过滤器。

以上便Component同Store交互的内容，大家可以根据实际情况选择不同的写法。

小结

我这人喜欢拿代码来表述思想。

var TodoActions = Reflux.createActions([

    'getAll',

    'addItem',

    'deleteItem',

    'updateItem'

]);

var TodoStore = Reflux.createStore({

    items: [1, 2, 3],

    listenables: [TodoActions],

    onGetAll: function () {

        $.get('/all', function (data) {

            this.items = data;

            this.trigger(this.items);

        }.bind(this));

    },

    onAddItem: function (model) {

        $.post('/add', model, function (data) {

            this.items.unshift(data);

            this.trigger(this.items);

        }.bind(this));

    },

    onDeleteItem: function (model, index) {

        $.post('/delete', model, function (data) {

            this.items.splice(index, 1);

            this.trigger(this.items);

        }.bind(this));

    },

    onUpdateItem: function (model, index) {

        $.post('/update', model, function (data) {

            this.items[index] = data;

            this.trigger(this.items);

        }.bind(this));

    }

});

var TodoComponent = React.createClass({

    mixins: [Reflux.connect(TodoStore, 'list')],

    getInitialState: function () {

        return {list: []};

    },

    componentDidMount: function () {

        TodoActions.getAll();

    },

    render: function () {

        return (

            <div>

                {this.state.list.map(function(item){

                    return <TodoItem data={item}/>

                })}

            </div>

        )

    }

});

var TodoItem = React.createClass({

    componentDidMount: function () {

        TodoActions.getAll();

    },

    handleAdd: function (model) {

        TodoActions.addItem(model);

    },

    handleDelete: function (model,index) {

        TodoActions.deleteItem(model,index);

    },

    handleUpdate: function (model) {

        TodoActions.updateItem(model);

    },

    render: function () {

        var item=this.props.data;

        return (

            <div>

                <p>{item.name}</p>

                <p>{item.email}</p>

                <p>/*操作按钮*/</p>

            </div>

        )

    }

});

React.render(<TodoComponent />, document.getElementById('container'));

实际情况远比这复杂，只是提供一个思路供大家参考。