學習過react的同學肯定都用過redux。了解redux資料流機制的action->dispatch->store->reduce->頁面互動其實很好理解，可是當我們要用到非同步請求或者列印日誌之類的副操作的時候，我們無法避免的會用到中介軟體middleware。中介軟體都是怎麼執行以及如何有序的串在一起很令人迷惑，下面我將嘗試解釋這個過程：
假如你有個需求需要在分發dispatch前後列印不同狀態值，你肯定會這麼想：
console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getstate())
複製**
function dispatchandlog(store, action)
//執行
dispatchandlog(store, action)
複製**
let next = store.dispatch
store.dispatch = function dispatchandlog(action)
複製**
store.dispatch = middleware(store)(next); // 這裡傳入store，是因為中介軟體中有可能會用到getstate獲取資料，比如列印當前使用者等需求 }}
複製**
中介軟體的功能各不相同，它們都要融入到dispatch中，在派發action的時候，按照順序乙個個的執行，這是乙個費腦經的事情。在上例中middleware會返回新的dispatch，我們需要做的也就是將產生的新的dispatch傳遞個下個中介軟體即可。如下：
let next = store.dispatch;
store.dispatch = middleware2(middleware(store)(next));
// 這裡傳入store，是因為中介軟體中有可能會用到getstate獲取資料，比如列印當前使用者等需求 }}
複製**
以此類推有大量的中介軟體的時候我們可以這麼幹：
middlewares = middlewares.slice();
middlewares.reverse(); //執行順序是後到前，所以得倒置
let dispatch = store.dispatch
//迴圈巢狀
middlewares.foreach(function(middleware));
return object.assign({}, store, ); //合併dispatch到redux裡。
}複製**
請注意這裡是乙個迴圈巢狀的乙個過程，所以中間的順序決定著中介軟體的執行順序。
總結兩點：
中介軟體在執行完副操作會並會返回新的dispatch
參考：zhuanlan.zhihu.com/p/34651008
redux中介軟體原理
應用了如下的中介軟體 a,b,c 整個執行 action 的過程為 a b c dispatch c b a action 最右側的next action 返回的是應用傳入的action 該行為是由redux createstore原始碼中dispatch方法返回值決定的，不過一般都會return ...
Redux中介軟體的原理
中介軟體顧名思義就是誰和誰的中間,在圖中 view在redux會派發乙個action，action通過store的dispatch方法派發給store,store接收到action 連同之前state 一同傳給reducer reducer會返回乙個新的資料給store store然後去改變自己的s...
解讀 Redux 中介軟體的原理
redux 的中介軟體提供的是位於action被發起之後，到達reducer之前的擴充套件點，換而言之，原本view action reducer store的資料流加上中介軟體後變成了view action middleware reducer store，在這一環節我們可以做一些 的操作，如 非...