註意：老鐵些，在看這篇文章的之前，最好瞭解一下react 的全局狀態管理庫哦，不然可能會坐飛機。 ^_^ React 之reflux (它是一個功能模塊，需要安裝引入)： import Reflux from 'reflux'; let action = Reflux.createAction(); ...
註意：老鐵些，在看這篇文章的之前，最好瞭解一下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裡面的屬性（被監聽）名一 致（字元串）。
各位老鐵，有錯誤的地方歡迎指正，多多指教了。^_^
