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. 创建actionstore

    1.1reflux.createAction(): 创建一个action;返回值是一个函数,调用这个函数就会触发相应的事件,在store中监听这个函数,并作相 应的处理。

      reflux.createActions([]):创建多个action;返回值是一个对象,包含多个函数。

     1.2reflux.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.1reflux.StoreMethods.pck = function(){};  //pck是定义的方法名。

      1.5.2let 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.1this.listenTo( actions.add, “add”); 第一个参数是actions对象的方法。第二个参数是store对象监听action的方法调用的方法名。如果是actions1的话,那么 写法就是this.listenTo( actions1, “actions1”); firstsecond参数名不需要一致。

    2.2this.listenToMany(actions); 参数actions必须是json对象。

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

    2.3listenables: [actions];  属性值actions必须是json对象。

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

    注意:2.12.2都是写在init函数内部,2.3方法是属性写法,listenables是配置   属性。并且2.22.3的参数或者属性值必须是 createActions  创建的action,也就是actions

===============================================================================================================================

    3. 异步action let asyncAction = Reflux.createAction({asyncResult: true});

         

===============================================================================================================================

 

    4. Action hooksReflux为每个action 方法都提供了两个hook方法。

    4.1preEmit(params) action emit之前调用,参数是action传递过来的,返回值 会传递给shouldEmit()

    4.2shouldEmit(params) action emit之前调用,参数默认是action传递,如果 preEmit有返回值,则是preEmit返回值;shouldEmit()的返回值决定是否 触发action事件。

    4.3:注意,如果preEmit有返回值,则该返回值会作为action事件的参数;否则就action的初始参数;不论shouldEmit的返回值是什么,它只是决定是否触 action事件。

===============================================================================================================================

 

    5. 同组件结合:

    let store = Reflux.createStore({});

    5.1store.listen(func);  func:被监听的函数。返回值是解除store监听的一个函数。

      5.1.1:当组件的生命周期结束时需要解除对Store的监听。

      5.1.2: 当Store调用trigger时,才会执行func函数,所以每次Store    更新时,需要手动调用trigger函数。

      5.1.3:并且store.trigger(params); 的参数将是func的参数(如果有)。

    5.2mixins: [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.3mixins: [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.4minxins: [Reflux.connect(store, ‘list’)]

      5.4.1:它相对应5.3来说,优化了一点,也就是不需要函数来更新state里面   list,但是还是必须手动触发store.trigger()

      5.4.2:注意,这里的‘list’参数是state里面的属性名(被监听的)。

    5.5mixins: [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里面的属性(被监听)名一   致(字符串)。

 

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

 

posted @ 2018-07-14 15:45 唯一念 阅读(...) 评论(...) 编辑 收藏