2 回答

TA貢獻1853條經驗 獲得超18個贊
store.dispatch
中間件圍繞實際的 Redux功能形成管道。當您調用 時store.dispatch(action)
,您實際上是在調用鏈中的第一個中間件。在中間件內部,next
將值傳遞給下一個中間件,同時storeAPI.dispatch
重新啟動管道。 action
是傳入dispatch
(或next
從前一個中間件傳入)的值。
這種可視化可能會有所幫助:
誠然,實際的實現是一些神奇的代碼,但您不必擔心。
有關更多詳細信息,請參閱我的“Redux 基礎研討會”幻燈片的“可擴展性和中間件”部分,以及有關 Redux 中間件如何工作的這些文章。

TA貢獻1796條經驗 獲得超4個贊
在這種情況下,next僅僅意味著這個中間件對那個特定的動作不感興趣,并且想把它傳遞給其他中間件來處理它。
當您將中間件提供給 applyMiddleware 函數時,它首先調用每個中間件并將其傳遞給middlewareAPI 此處調用的內容。然后從最后一個中間件開始,調用它并給store.dispatch它,然后將它的結果發送給中間件,中間件在最后一個之前。并繼續這樣(將后一個中間件的結果傳遞給它之前的中間件)一直到第一個中間件。
所以假設你有這三個中間件:[a, b, c]你把它們都傳遞給 applyMiddleware 函數。這是發生的事情:
首先,每個中間件都被middlewareAPI對象調用,它基本上是一個包含原始store.dispatch和的對象store.getState。
const middlewareAPI = { getState: store.getState, dispatch: store.dispatch }
const aInChain = a(middlewareAPI);
const bInChain = b(middlewareAPI);
const cInChain = c(middlewareAPI);
其次,我們調用每個中間件,其結果是之前調用中間件的結果。期待最后一個中間件,它后面沒有任何東西,并將原始調度作為輸入。
const finalC = cInChain(store.dispatch);
const finalB = bInChain(finalC);
const finalA = aInChain(finalB);
然后我們將第一個中間件的最終版本設置為新增強存儲的調度。因此,例如,當您調用 時store.dispatch({ type: "Hello" }),該finalA函數被調用,如果它調用finalB作為 提供給它的函數,則next鏈中的下一個中間件將被調用,無論finalA它給出什么動作。整個鏈條都是這樣的。
因此,在我們在問題中的示例中,中間件中有兩個返回語句。第一個是return dispatch({...}),第二個是return next({...})。
在它們兩個中,我們的中間件都說它已經完成了這個動作的工作并讓調度鏈繼續;但是在第一個 return 語句中,中間件dispatch直接調用原始的,并將一個新類型的新動作傳遞給dispatch. 所以最初傳遞給我們中間件的動作將被完全遺忘。該語句在 action 到達 store 之前中斷了中間件的鏈,并使用新的 action 開始新的 dispatch。
在第二次返回中,我們的中間件調用該next函數,正如我之前描述的,它是該行中的下一個中間件,我們的中間件將原始的發送action給它而不做任何更改。所以結果就像這個中間件根本不存在一樣。
在這種情況下,我們的中間件只是說“我不關心這個動作是什么;我想把它發送到下一個中間件來決定它是否應該到達store.dispatch”。
添加回答
舉報