使用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就會對其進行檢測以便正確的處理。