Redux源碼分析--Middleware（2）

上一部分介紹了在分析源碼過程中，出現的問題，及對它的解釋，如果你想了解，請進入middleware代碼分析延伸問題。

這一章，主要帶領你們去學習middleware的工作原理，瞭解了工作原理，才能更好的去使用它。

要想深入瞭解middleware工作原理，必須弄懂compose(...chain)(store.dispatch)這行代碼。

下面我們用一個實例來說明middleware工作原理：

let m1 = ({getState, dispatch}) => (next) => (action) => {
	console.log('m1-next-before');
	next(action);
	console.log('m1-next-after');
}

let m2 = ({getState, dispatch}) => (next) => (action) => {
	console.log('m2-next-before');
	next(action);
	console.log('m2-next-after');
}

let m3 = ({getState, dispatch}) => (next) => (action) => {
	console.log('m3-next-before');
	next(action);
	console.log('m3-next-after');
}

let store = applyMiddleware(m1, m2, m3)(createStore)(reducer)

執行結果：

 上面創建了三個自定義中間件m1, m2, m3。當dispatch(action)時，m1將會執行，等執行到next(ation)時，因爲這裏的next是m2中的(action) => {}（如果你不理解這個，請進入Redux源碼分析--Middleware（1）學習），就會去執行m2的(action) => {}，當執行到m2中的next(action)時，就會去執行下一個中間件的(action) => {}，等到最後一箇中間件時，執行到next(action)時，其實是執行的dispatch(action)，這個就是去執行store.dispatch，從而獲取最新的state，及處理監聽事件，等dispatch執行完成之後，就會接着執行最後一箇中間件內部的next(action)下面的代碼，所以會輸出m3-next-after，再一步一步從m3往前至m1執行，所以輸出結果：m3-next-after m2-next-after m1-next-after。代碼的執行，其實很像洋蔥，從外到內，在到外，如下圖所示