美文网首页React
中间件redux-thunk使用过程

中间件redux-thunk使用过程

作者: 素月某某 | 来源:发表于2017-06-03 17:45 被阅读105次

    使用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就会对其进行检测以便正确的处理。

    相关文章

      网友评论

        本文标题:中间件redux-thunk使用过程

        本文链接:https://www.haomeiwen.com/subject/gzrmfxtx.html