中間件redux-thunk使用過程

使用redux-thunk創(chuàng)建加強版store的過程圖:

redux提供了使用中間件的方法:applyMiddleware()
(1)thunkMiddleware--- 返回以 dispatch 和 getState 作為參數(shù)的action
(2)applyMiddleware
參數(shù):中間件
返回值:store的增強器,以createStore為參數(shù)的匿名函數(shù),這個函數(shù)返回另一個以reducer, initialState, enhancer為參數(shù)的匿名函數(shù)
(3)createStore(rootReducer,initialState,applyMiddleware(thunkMiddleware));
①createStore收到的參數(shù)中有enhance時會怎么做嗎?return enhancer(createStore)(reducer, initialState)
②applyMiddleware(thunkMiddleware)(createStore)(reducer, initialState)

  • applyMiddleware(thunkMiddleware)
    applyMiddleware接收thunkMiddleware作為參數(shù),返回形如(createStore) => (reducer, initialState, enhancer) => {}的函數(shù)。

  • applyMiddleware(thunkMiddleware)(createStore)
    以 createStore 作為參數(shù),調(diào)用上一步返回的函數(shù)(reducer, initialState, enhancer) => {}

  • applyMiddleware(thunkMiddleware)(createStore)(reducer, initialState)
    以(reducer, initialState)為參數(shù)進行調(diào)用。 在這個函數(shù)內(nèi)部,thunkMiddleware被調(diào)用,其作用是監(jiān)測type是function的action

因此,如果dispatch的action返回的是一個function,則證明是中間件,則將(dispatch, getState)作為參數(shù)代入其中,進行action 內(nèi)部下一步的操作。否則的話,認為只是一個普通的action,將通過next(也就是dispatch)進一步分發(fā)。

applyMiddleware(thunkMiddleware)作為enhance,最終起了這樣的作用:

對dispatch調(diào)用的action(例如,dispatch(addNewTodo(todo)))進行檢查,如果action在第一次調(diào)用之后返回的是function,則將(dispatch, getState)作為參數(shù)注入到action返回的方法中,否則就正常對action進行分發(fā),這樣一來我們的中間件就完成了。

因此,當action內(nèi)部需要獲取state,或者需要進行異步操作,在操作完成之后進行事件調(diào)用分發(fā)的話,我們就可以讓action 返回一個以(dispatch, getState)為參數(shù)的function而不是通常的Object,enhance就會對其進行檢測以便正確的處理。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 前言 本文 有配套視頻,可以酌情觀看。 文中內(nèi)容因各人理解不同,可能會有所偏差,歡迎朋友們聯(lián)系我討論。 文中所有內(nèi)...
    珍此良辰閱讀 12,171評論 23 111
  • 一、什么情況需要redux? 1、用戶的使用方式復雜 2、不同身份的用戶有不同的使用方式(比如普通用戶和管...
    初晨的筆記閱讀 2,129評論 0 11
  • 在學習了redux過程中,了解到中間件這個名詞,但是我看了十遍,也完全就是懵逼的狀態(tài)。于是又重復敲了幾次代碼也不能...
    綽號陸拾柒閱讀 597評論 0 0
  • http://gaearon.github.io/redux/index.html ,文檔在 http://rac...
    jacobbubu閱讀 80,410評論 35 198
  • createStore(reducer, [initialState],enhancer) 創(chuàng)建一個 Redux ...
    JackLee_閱讀 1,000評論 0 0

友情鏈接更多精彩內(nèi)容