Redux的action和reducer已經足夠復雜了，現在還需要理解Redux的中間件。為什么Redux的存在有何意義？為什么Redux的中間件有這么多層的函數返回？Redux的中間件究竟是如何工作的？本文來給你解惑，Redux中間件從零到“放棄”。
本文的參考網站只有二個，首當其沖的就是Redux的官方網站，本文的思考過程大多參考官方給出的例子。還有一個就是Redux的經典中間件，可以說Redux的中間件的產生就是為了實現它——redux-thunk。
寫在前面：本文其實就是我理解Redux中間件的一個思考過程，中間不免來自我個人的吐槽，大家看看樂樂就好。
我們為什么要用中間件？
我們為什么要用中間件？這個問題提的好！為了回答這個問題，我現在提出一個需求，所有的store.dispatch都要監控dispatch之前和之后的state變化。那么我們會怎做呢？So easy，直接前后都加上console.log(store.getState())就可以了不是嗎？
console.log('dispatching', action)
store.dispatch(getTodos({items:[]}))
console.log('next state', store.getState())
console.log('dispatching', action)
store.dispatch(getTodos({items:["aaa"]}))
console.log('next state', store.getState())
沒錯，我們可以這么做。不過如果誇張點，我有成千上萬的dispatch，那么console.log就要dispatch的數量*2了。然后當我們幸幸苦苦打完點，產品要上線了，我們需要把斷點都關閉。這個時候難道我們要一個個去注釋刪除嗎？
不，我不干，這樣可能還會改錯。那么我們將此功能獨立出來試試，這樣不就可以實現復用了。將公用代碼寫入一個方法，然后變化的參數提取出來。
function dispatchAndLog(store, action) {
console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getState())
}
dispatchAndLog(store, getTodos({items:[]}))
dispatchAndLog(store, getTodos({items:["aaa"]}))
這樣是不是就方便了很多，注釋的話只需要注釋兩行，而不是隨着dispatch成倍數增長。但是我覺得這樣寫，對於其他合作的小伙伴不友好，相當於我自己寫了一套語法出來。最好還是使用官方的store.dispatch的時候，自定義函數一起執行了。
可以這樣改寫store.dispatch，將store.dispatch賦值給next，然后將diapatch變成我們自定義的函數，在這個自定義的函數中調用next，也就是原dispatch。這樣就玩美地改寫了dispatch，保留了原始功能，還添加了自定義的方法。
const next = store.dispatch
store.dispatch = function dispatchAndLog(action) {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
鏘鏘鏘~~~這個時候Redux中間件的雛形就出現了。
MiddleWare就是對dispatch方法的一個改造，一個變異。
多中間件的實現
那么假象一下，我不僅需要監控state，我可能還有其他的功能。而且與監控state的方法相互獨立。也就是我需要多個中間件，那么該如何實現呢？
我們可以將每次的變異store.dispatch都傳遞給一個新的參數，傳入下一次變異之中執行，但是要像這樣next1，next2……這樣源源不斷地下去嗎？
const next = store.dispatch
const next1 = store.dispatch = function dispatchAndLog1(action) {
console.log('dispatching', action)
let result = next(action)
console.log(result,'next state', store.getState())
return result
}
const next2 = store.dispatch = function dispatchAndLog2(action) {
console.log('dispatching1', action)
let result = next1(action)
console.log(result,'next state1', store.getState())
return result
}
...
...
...
這樣是不是格式有點丑？讓我們想辦法解放next參數。我的想法是這樣的，先寫一個compose，用來結合這些方法，然后返回一個變異的dispatch方法。
const _dispatch=store.dispatch;
function compose(){
return function(action){
_dispatch(action)
}
}
store.dispatch=compose(dispatchAndLog1,dispatchAndLog2)
嵌套函數的解放
在實現compose方法之前我們先考慮一個問題，現在middlewares的結構是這樣的，多層嵌套，一個函數嵌入一個函數，我們改如何將這個方法從嵌套中解放出來呢？
function A(){
function B(){
function C(){
}
}
}
如何能避免面多層的嵌套？通過把函數賦值給一個參數，可以解放嵌套，但這樣不太現實，因為我們需要創建許多的參數。
const CM=function C(){}
const BM=function B(){
CM()
}
const AM=function A(){
BM()
}
為了避免創建許多不必要的引用，我們可以用傳遞參數的方式來解決這個問題，直接將函數當作參數傳入，那么就要注意一個問題，因為我們要先傳入函數，但是不執行各函數，所以每個函數我們都要返回一個函數，也就是創建高階函數，等都准備好了，從最外層的函數開始調用執行。
function C(){
return function(){}
}
function B(CM){
return function(){
CM()
}
}
function A(BM){
return function(){
BM()
}
}
這個方法執行的方式就很惡心，是一個函數嵌套后面的一個函數，將C返回的函數傳入B，然后將B返回的函數傳入A，最后執行()，逐層執行函數，這樣也就沒有逃離回調地獄。
let compose=A(B(C()))
compose()
Array.reduce登場
這個時候我們可以考慮下Array.reduce這個方法，將這些函數都合並起來。首先先創建一個數組，每個函數傳遞一個next的函數，以便於逐層執行函數。
let array=Array(3)
array[0]=function(next){
return function(){
let res= next();
return res
}
}
array[1]=function(next){
return function(){
let res= next();
return res
}
}
array[2]=function(next){
return function(){
let res= next();
return res
}
}
reduce只是合並，並不是執行，大家注意了，所以我們需要在每次執行之前加一層返回函數的操作。注意返回的函數需要和自定義函數的格式一致，也就是返回的函數需要傳參next，相當於prevFunction是之前兩個函數的結合，只有按照自定義函數的格式prevFunction才會有效。不然只有數組第一第二個會執行，因為初始值就是他們倆執行的結果返回。
function dispatch(){
console.log("dispatch")
return "dispatch"
}
function compose(array){
return array.reduce((prevFunction,currentFunction)=>{
return function (next) {
return prevFunction(currentFunction(next))
}
})
}
console.log(compose(array)(dispatch)());
這里我定義了一個dispatch作為我的最初的next參數，傳入中間件的集合之中，最先推入棧的函數，是最后執行的，因次我們的dispatch會在最后一層函數執行。細心如你們應該發現了。我的每個自定義函數都返回了上方next的返回值。其實就是為了將dispatch的值返回。這樣compose函數執行之后所得到的值就是dispatch的值。這樣我們就可以獲取原版store.dispatch的值了。順便科普下原版store.dispatch返回的值就是傳入action。
根據上述思路，我們來寫下合並中間件的compose函數，首先將store.dispatch給_dispatch備用，然后compose這個高階函數的第一層參數是中間件，第二層就是初始next函數，也就是原版的store.dispatch，我們傳入副本_dispatch就可以了。最后改造store.dispatch。
const _dispatch=store.dispatch;
function compose(){
let middlewares=Array(arguments.length).join(",").split(",")
middlewares=middlewares.map((i,index)=>{
return arguments[index];
})
return middlewares.reduce((prevFunction,currentFunction)=>{
return function (next) {
return prevFunction(currentFunction(next))
}
})
}
store.dispatch=compose(dispatchAndLog1,dispatchAndLog2)(_dispatch)
這樣我們就可以調用多個中間件啦。
融入createStore
但是，官方的中間件可不是這么些的。我翻譯了下官方對於應用中間件函數applyMiddleware()的一個定義，其實就是對createStore的一個增強enhance，也就是封裝啦。但是有以下幾點需要注意下：
- 自定義中間件可以獲取到
createStore的dispatch(action)和getState()方法。 store.dispatch(action)執行時，中間件的鏈也會執行，也就是綁定的中間件都要執行。- 中間件只執行一次，並且作用於在
createStore，而不是createStore返回的對象store。也就是說在store創建的時候，中間件已經執行完畢了。 applyMiddleware()要返回一個createStore，也就是經過改造之后的createStore
那我們就根據以上的注意點，理解下官方設定的applyMiddleware()。 首先是如何增強 createStore，同時有保證原有功能？
applyMiddleware()要返回一個createStore，也就是經過改造之后的createStore
function applyMiddlewareTest(){
return (createStore)=>{
return function (reducer) {
return createStore(reducer)
}
}
}
這樣調用applyMiddlewareTest()(createStore)(reducer)不就等同於createStore(reducer)。
store.dispatch(action)執行時，中間件的鏈也會執行，也就是綁定的中間件都要執行。
因為我們不會控制中間件的數量applyMiddlewareTest(m1,m2,m3……)，所以我們采用arguments的特性，來獲取中間件的數組，處理一下之后，調用我們已經寫好的compose函合並一下，傳給_dispatch，最后利用Object.assign拷貝store以及變異的dispatch。
function applyMiddlewareTest(){
let middlewares=Array(arguments.length).join(",").split(",")
middlewares=middlewares.map((i,index)=>{
return arguments[index];
})
return (createStore)=>{
return function (reducer) {
let store = createStore(reducer)
let _dispatch=compose(middlewares)(store.dispatch)
return Object.assign({},store,{
dispatch:_dispatch
})
}
}
}
自定義中間件可以獲取到createStore的dispatch(action)和getState()方法。
我們現在寫的中間件是無法從函數內部中獲取到dispatch(action)和getState()，所以我們需要多寫一層函數，傳入dispatch(action)和getState()。為了簡潔，我們可以傳入一個對象，包含了入dispatch(action)和getState()兩個方法
function dispatchAndLog2({dispatch,getState}){
return function (next){
return function (action) {
console.log('dispatching1', action)
let result = next1(action)
console.log(result,'next state1', store.getState())
return result
}
}
}
這個函數可以簡化為es6的寫法：
const dispatchAndLog2=({dispatch,getState})=>next=>action{
....
}
出現了！三層函數啊，第一層為了傳遞store的dispatch(action)和getState()方法，第二層傳遞的參數next是下一個待執行的中間件，第三層是函數本體了，傳遞的參數action是為了最終傳遞給dispatch而存在的。
回到applyMiddlewareTest，中間件中需要的dispatch和getState，我們可以加幾行代碼實現。直接執行中間件的第一層，將兩個方法傳遞進去。此處需要注意dispatch因為我們需要傳遞的dispatch是變異之后的，而不是原生的。所以邊我們改寫下dispatch的方法，讓中間件調用此方法時，是變異后的dispatch。不然中間件中執行的dispatch就無法執行中間件了。
function applyMiddlewareTest(){
...
let _dispatch=store.dispatch
let _getState=store.getState
let chain = middlewares.map(function (middleware) {
return middleware({
dispatch:function dispatch() {
return _dispatch.apply(undefined, arguments);
},
getState:_getState
});
});
_dispatch=compose(chain)(store.dispatch)
....
}
redux-thunk的實現
最后測試一波自己寫的中間件是否成功：
function logger({ getState }) {
return function(next){
return function(action){
console.log('will dispatch', action)
const returnValue = next(action)
console.log('state after dispatch', getState())
return returnValue
}
}
}
const ifActionIsFunction = {dispatch，getState} => next => action => {
if (typeof action === 'function') {//如果是函數就執行並返回，然后再函數中執行dispatch，相當於延遲了dispatch。
return action(dispatch, getState);
}else{
let res=next(action)
return res
}
}
let store=applyMiddlewareTest(logger,ifActionIsFunction)(createStore)(rootReducer)
store.dispatch((dispatch,getState)=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
dispatch(getTodos({items:["aaaa"]}))
console.log(getState())
resolve()
},1000);
})
})
運行是成功的，這里我寫的中間件的功能是是如果action是函數，那么就返回函數的執行結果，並且向函數中傳入dispatch和getState方法。這樣就可以在action函數中調用dispatch了。機智如你一定發現了這個就是異步的一個實現，也就是redux-thunk的基本邏輯。（其實就是參照redux-thunk寫的。）
這里還有一個隱藏功能不知道大家發現了沒有，我返回的是一個promise，也就是說我可以實現then的鏈式調用。
store.dispatch((dispatch,getState)=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
dispatch(getTodos({items:["aaaa"]}))
console.log(getState())
resolve("then方法調用成功了嗎？")
},1000);
})
}).then((data)=>{
console.log(data)
})