使用redux-thunk创建加强版store的过程图:
redux提供了使用中间件的方法:applyMiddleware()
(1)thunkMiddleware--- 返回以 dispatch 和 getState 作为参数的action
(2)applyMiddleware
参数:中间件
返回值:store的增强器,以createStore为参数的匿名函数,这个函数返回另一个以reducer, initialState, enhancer为参数的匿名函数
(3)createStore(rootReducer,initialState,applyMiddleware(thunkMiddleware));
①createStore收到的参数中有enhance时会怎么做吗?return enhancer(createStore)(reducer, initialState)
②applyMiddleware(thunkMiddleware)(createStore)(reducer, initialState)
-
applyMiddleware(thunkMiddleware)
applyMiddleware接收thunkMiddleware作为参数,返回形如(createStore) => (reducer, initialState, enhancer) => {}的函数。 -
applyMiddleware(thunkMiddleware)(createStore)
以 createStore 作为参数,调用上一步返回的函数(reducer, initialState, enhancer) => {} -
applyMiddleware(thunkMiddleware)(createStore)(reducer, initialState)
以(reducer, initialState)为参数进行调用。 在这个函数内部,thunkMiddleware被调用,其作用是监测type是function的action
因此,如果dispatch的action返回的是一个function,则证明是中间件,则将(dispatch, getState)作为参数代入其中,进行action 内部下一步的操作。否则的话,认为只是一个普通的action,将通过next(也就是dispatch)进一步分发。
applyMiddleware(thunkMiddleware)作为enhance,最终起了这样的作用:
对dispatch调用的action(例如,dispatch(addNewTodo(todo)))进行检查,如果action在第一次调用之后返回的是function,则将(dispatch, getState)作为参数注入到action返回的方法中,否则就正常对action进行分发,这样一来我们的中间件就完成了。
因此,当action内部需要获取state,或者需要进行异步操作,在操作完成之后进行事件调用分发的话,我们就可以让action 返回一个以(dispatch, getState)为参数的function而不是通常的Object,enhance就会对其进行检测以便正确的处理。
网友评论