前言

我們在上一節中介紹了redux的一個基本用法Redux 入門。 使用者發出Action，redux計算出新的state，View根據新的state來渲染介面。但是當我們希望嘗試非同步操作、並且希望當一個action完成之後自動執行下一個action的時候怎麼辦呢？這裡我們介紹下在redux中經常被使用的一個工具：middleware

中介軟體的概念

要想理解中介軟體，我們先站在設計者的角度來思考問題；如果我們需要在redux中新增的功能怎麼做？

• reducer： 純函式，只承擔計算State的功能，存函式不能進行讀寫操作
• View: 和state一一對應，
• Action: 存放資料的物件，訊息的存放載體，只是一個載體，可以被動的接收訊息卻無法操作訊息。
• dispatch: 發出action的時候

如上一篇文章中提到的發出一個action的常見dispatch方法

store.dispatch(createTODOAction("TODO text"));

我們現在對這個dispatch函式稍微改造下

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

在發出當前action之前列印log，在發出當前action之後再次列印log資訊。

中介軟體就是一個函式，它對store.dispatch 方法進行了改造，在發出action和執行reducer之間添加了其他功能

中介軟體的用法

這裡以常見的中介軟體redux-logger為例

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const
 
 store = createStore(
  reducer,
  applyMiddleware(logger)
);

其實比較簡單。通常情況下中介軟體元件會提供一個生成當前該中介軟體的一個函式；例如這裡的createLogger()然後將生成的中介軟體作為appliMiddleware(...)的入參。在傳入createStore方法即可。
需要注意的是
- createStore可以接收三個引數，通常第二個引數用於初始化當前應用的初始狀態

const initial_store = {}；
const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(logger)
);

• 中介軟體的排列順序是有講究的(一定要按照特定的順序排，或者按照自己所期望的順序排列)

applyMiddleware

applyMiddleware的作用就是講多個middle組合在一起，然後按照一定的秩序執行

非同步操作的思路

• 操作開始時，送出一個 Action，觸發 State 更新為”正在操作”狀態，View 重新渲染
• 操作結束後，再送出一個 Action，觸發 State 更新為”操作結束”狀態，View 再一次重新渲染