正文
react 之 reflux 填坑
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
注意：老铁些，在看这篇文章的之前，最好了解一下react 的全局状态管理库哦，不然可能会坐飞机。 ^_^
React 之reflux (它是一个功能模块，需要安装引入)：
import Reflux from 'reflux';
let action = Reflux.createAction();//1使用
let actions = Reflux.createActions(['add','delete','check']);//1使用
let store = Reflux.createStore({});//1使用
- 创建action和store：
1.1：reflux.createAction()： 创建一个action；返回值是一个函数，调用这个函数就会触发相应的事件，在store中监听这个函数，并作相 应的处理。
reflux.createActions([])：创建多个action；返回值是一个对象，包含多个函数。
1.2：reflux.createStore({}); 创建store实例，返回一个对象。
1.3：创建action方法的公用方法，reflux.ActionMethods.pck = function(){}; 。//pck方法是你要创建的公用方法
单个action使用公用方法：action.pck();
多个action使用公用方法：actions.add.pck();
1.4：创建Store的公用方法，reflux.StoreMethods.pck = function(){}; 。
1.5：拓展store的公用方法：
1.5.1：reflux.StoreMethods.pck = function(){}; //pck是定义的方法名。
1.5.2：let mixin = { pck: function(){} };
let store = reflux.createStore({ mixins:[mixin], ...});
===============================================================================================================================
2. Store监听Action：
let actions = reflux.createActions([ ‘add’, ‘delete’, ‘check’]);
let actions1 = reflux.createAction();
let store = reflux.createStore({ init: function(){}, ...});
2.1：this.listenTo( actions.add, “add”); 第一个参数是actions对象的方法。第二个参数是store对象监听action的方法调用的方法名。如果是actions1的话，那么 写法就是this.listenTo( actions1, “actions1”); first和second参数名不需要一致。
2.2：this.listenToMany(actions); 参数actions必须是json对象。
处理方法的写法只需让action 的标识首字母大写并加上on 就可以了。例如：add→onAdd。
2.3：listenables: [actions]; 属性值actions必须是json对象。
处理方法的写法只需让action的标识首字母大写并加上on就可以了。例如：add→onAdd。
注意：2.1和2.2都是写在init函数内部，2.3方法是属性写法，listenables是配置 属性。并且2.2和2.3的参数或者属性值必须是 createActions 创建的action，也就是actions。
===============================================================================================================================
3. 异步action ：let asyncAction = Reflux.createAction({asyncResult: true});
===============================================================================================================================
4. Action hooks：Reflux为每个action 方法都提供了两个hook方法。
4.1：preEmit(params) ，action emit之前调用，参数是action传递过来的，返回值 会传递给shouldEmit()；
4.2：shouldEmit(params) ，action emit之前调用，参数默认是action传递，如果 preEmit有返回值，则是preEmit返回值；shouldEmit()的返回值决定是否 触发action事件。
4.3：注意，如果preEmit有返回值，则该返回值会作为action事件的参数；否则就是action的初始参数；不论shouldEmit的返回值是什么，它只是决定是否触 发action事件。
===============================================================================================================================
5. 同组件结合：
let store = Reflux.createStore({});
5.1：store.listen(func); func：被监听的函数。返回值是解除store监听的一个函数。
5.1.1：当组件的生命周期结束时需要解除对Store的监听。
5.1.2： 当Store调用trigger时，才会执行func函数，所以每次Store 更新时，需要手动调用trigger函数。
5.1.3：并且store.trigger(params); 的参数将是func的参数（如果有）。
5.2：mixins: [Reflux.ListenerMixin] + store.listen(func);
5.2.1：适用于作为React.createClass({})的配置属性。
例如：let test = React.createClass({ mixins: [Reflux.ListenerMixin] }); （首字母大写 ListenerMixin）
5.2.2：接下来的写法和5.1方法一样，不过没有了5.1.1的限制。
5.3：mixins: [Reflux.listenTo(store, “func”)]
5.3.1：适用于作为React.createClass({})的配置属性。
例如：let test = React.createClass({mixins: [Reflux.listenTo(store, “func”)] });
5.3.2：它比5.2更优化的是，没有了store.listen(func); 但是也必须要手动触发 store.trigger();
5.4：minxins: [Reflux.connect(store, ‘list’)]
5.4.1：它相对应5.3来说，优化了一点，也就是不需要函数来更新state里面 的list，但是还是必须手动触发store.trigger()。
5.4.2：注意，这里的‘list’参数是state里面的属性名（被监听的）。
5.5：mixins: [Reflux.connectFilter(store, ‘list’, function(list){})];
5.5.1：相对于5.4来说，只是增加了一个数据过滤器。
5.5.2：第三个参数就是过滤函数。参数名不必和第二个参数名相同。
5.5.3：还是必须要手动触发 store.trigger(); 。
总结：这5种结合的方法，都必须手动触发store.trigger(); ；
5.4方法与5.5方法的第二个参数名必须和state里面的属性（被监听）名一 致（字符串）。
各位老铁，有错误的地方欢迎指正，多多指教了。^_^
