首先我們來了解一下redux的幾個基本概念：
redux的乙個粗略的是處理過程就是：
redux中介軟體其實是提供了位於action被發起之後，到達reducer之前的擴充套件點，暫時簡單理解為這樣（其實不然，實際詳細結構往後看ovo!）
箭頭函式風格：
() => next => action =>() => }}
...middlewares: middleware // 中介軟體佇列
): storeenhancer
const middlewareapi: middlewareapi =
const chain = middlewares.map(middleware => middleware(middlewareapi)) // 每乙個中介軟體傳入middlewareapi
dispatch = compose(...chain)(store.dispatch)
return
}
next => action =>compose函式處理。
compose的實現原始碼如下：
export default function compose(...funcs: function)
if (funcs.length === 1)
// 主要看這裡
return funcs.reduce((a, b) => (...args: any) => a(b(...args)))
}
return的處理方式可以看出，中介軟體佇列經過reduce處理以後會是這個樣子：
舉個栗子：
[m1, m2, m3]compose處理後：
(...args) => m1(m2(m3(...args)))m1
() => (next) => (action) =>m2
() => (next) => (action) =>compose處理以後偽**
(...args) => m1(m2(...args))store.dispatch作為引數傳入,執行結果變為：
m1(m2(store.dispatch)m2執行以後：
m1((action) => )(() => )()
console.log('m1 after next')
return result;
})()
結構就是這樣
'm2 after next'}'m1 after next'}這才是中介軟體的真實結構~
redux 中介軟體 redux thunk
什麼是中介軟體？中介軟體指的是redux的，不是react的。中間指的是action跟store之間，也就是對dispacth方的封裝，最原始的是直接將接受過來的物件直接傳遞給store，但是如果傳遞的是乙個函式的話，就不會將這直接傳遞給store，而是先執行這個函式。常見的中間有 redux de...
redux中介軟體原理
應用了如下的中介軟體 a,b,c 整個執行 action 的過程為 a b c dispatch c b a action 最右側的next action 返回的是應用傳入的action 該行為是由redux createstore原始碼中dispatch方法返回值決定的，不過一般都會return ...
redux中介軟體 redux thunk
redux中介軟體 redux thunk 通常情況下，action只是乙個物件，不能包含非同步操作，這導致了很多建立action的邏輯只能寫在元件中，量較多也不便於復用，同時對該部分 測試的時候也比較困難，元件的業務邏輯也不清晰，使用中介軟體了之後，可以通過actioncreator非同步編寫ac...