亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

react-redux 中間件中的“下一個”如何工作?

react-redux 中間件中的“下一個”如何工作?

www說 2022-06-16 15:19:43
我是 React 和 Redux 的新手。我有一個簡單的應用程序,您可以在其中將輸入文本添加到無序列表中。我有防止顯示特定單詞的中間件。我不明白實現中間件的操作順序。據我了解,當我觸發調度時,會發生以下情況:從表單提交事件觸發調度// title is an object with a stringfunction handleSubmit(event) {    props.addArticle(title);}通過中間件功能:// store.jsconst store = createStore(  rootReducer, // this is defined elsewhere and effectively handles actions  applyMiddleware(forbiddenWordsMiddleware));// middleware.jsimport { ADD_ARTICLE } from "../constants/constants.js";const forbiddenWords = ["spam", "money"];export function forbiddenWordsMiddleware({ dispatch }) {    return function (next) {        return function (action) {            if (action.type === ADD_ARTICLE) {                const foundWord = forbiddenWords.filter((word) =>                    action.payload.title.includes(word)                );                if (foundWord.length) {                    return dispatch({ type: "FOUND_BAD_WORD" });                }            }            return next(action);        };    };}上述函數實際上如何與 createStore 和 applyMiddleware 一起工作?讓我特別困惑的是這next(action)條線。下一步和行動從何而來?我無法想象從表單提交到檢查禁用詞的線性執行。
查看完整描述

2 回答

?
慕容森

TA貢獻1853條經驗 獲得超18個贊

store.dispatch中間件圍繞實際的 Redux功能形成管道。當您調用 時store.dispatch(action),您實際上是在調用鏈中的第一個中間件。在中間件內部,next將值傳遞給下一個中間件,同時storeAPI.dispatch重新啟動管道。 action是傳入dispatch(或next從前一個中間件傳入)的值。

這種可視化可能會有所幫助:

http://img1.sycdn.imooc.com//62aad9ab0001cf4b07800164.jpg

誠然,實際的實現是一些神奇的代碼,但您不必擔心。

有關更多詳細信息,請參閱我的“Redux 基礎研討會”幻燈片的“可擴展性和中間件”部分,以及有關 Redux 中間件如何工作的這些文章


查看完整回答
反對 回復 2022-06-16
?
SMILET

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”。


查看完整回答
反對 回復 2022-06-16
  • 2 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號