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使用

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里面的属性（被监听）名一   致（字符串）。

 

各位老铁，有错误的地方欢迎指正，多多指教了。^_^