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里面的屬性(被監聽)名一   致(字符串)。

 

各位老鐵,有錯誤的地方歡迎指正,多多指教了。^_^

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM