首先看下redux執行流程：

redux設計思想：

（1）Reducer：純函式，只承擔計算 State 的功能，不合適承擔其他功能，也承擔不了，因為理論上，純函式不能進行讀寫操作。

（2）View：與 State 一一對應，可以看作 State 的視覺層，也不合適承擔其他功能。

（3）Action：存放資料的物件，即訊息的載體，只能被別人操作，自己不能進行任何操作。

想來想去，只有傳送 Action 的這個步驟，即store.dispatch()方法，可以新增功能。

中介軟體根本原理：對store.dispatch進行改造。

中介軟體出現的

    舉例來說，要新增日誌功能，把 Action 和 State 打印出來，可以對store.dispatch進行如下改造。

let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}
 

上面程式碼中，對store.dispatch進行了重定義，在傳送 Action 前後添加了列印功能。這就是中介軟體的雛形。

中介軟體就是一個函式，對store.dispatch方法進行了改造，在發出 Action 和執行 Reducer 這兩步之間，添加了其他功能。

————————————————————————————————————————————

applyMiddlewares的作用：它是 Redux 的原生方法，作用是將所有中介軟體組成一個數組，依次執行。

原始碼：

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {...store, dispatch}
  }
}

//執行順序解析
//中介軟體陣列傳入{getState: store.getState,dispatch: (action) => dispatch(action)} => 
//compose合併新中介軟體陣列 並傳入dispatch=>
//執行完所有中介軟體函式後返回store和dispatch
 

applyMiddlewares呼叫例項：返回store物件

let middlewares = [loggerMiddleware, thunkMiddleware, ...others];
let store = applyMiddleware(middlewares)(createStore)(reducer, initialState);