middleware的應用

用四步理解middleware機制：

1 函數式編程思想設計middleware

middleware是一個層層包裹的匿名函數，這其實是函數式編程中的柯里化，applyMiddleware會對logger這個middleware進行層層調用，動態的對 store和next賦值。

import {createStore, applyMiddleware, compose} from redux;

import rootReducer from ../reducers;

import DevTools from ../containers/DevTools;

const finalCreateStore = compose(

applyMiddleware(d1,d2,d3),

DevTools.instrument()

) (createStore);

2 給middleware分發store

創建一個普通的store通過如下方式：

let newStore= applyMiddleware(mid1, mid2, mid3, ...) (createStore) (reducer, null);

var middlewareAPI={

getState:store.getState,

dispatch: (action) => dispatch(action)

};

chain = middlewares.map(middleware => middleware(middlewareAPI))

var middleware帶著middlewareAPI這個參數分別執行一遍

3. 組合串聯middleware

dispatch = compose(...chain) (store.dispatch);

function compose(...funcs) {

return arg => funcs.reduceRight((compose,f) => f(composed),arg);

}

4. 在middleware中調用dispatch會發生什麼