reactjs - 如何在 redux 中间件中访问调度？

Question

我正在探索更多关于 redux 中间件的信息。但坚持这一点，我不明白如何在 redux 中间件中访问"dispatch"？是因为 createStore 函数吗？ (初始化时)

function createThunkMiddleware(extraArgument) {
  console.log('createThunkMiddleware =================', extraArgument)
  // console.log('dispatch =================', dispatch)
  return ({ dispatch, getState }) => next => action => {
    console.log('just above dispatch', dispatch)
    if (typeof action === 'function') {
      console.log('dispatch ======>',dispatch)
      console.log('action =====>',action)
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

Answer 1

如果您快速查看源代码，您会发现是 applyMiddleware 函数将中间件 API 注入(inject)到每个中间件中。

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        `Dispatching while constructing your middleware is not allowed. ` +
          `Other middleware would not be applied to this dispatch.`
      )
    }
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }

    // Here is the interesting part where we pass in the dispatch
    // and getState functions
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

这是直接来自redux源代码linke here! .我可以详细介绍，但我实际上写过这个 here ，所以当我详细介绍这个确切的问题时，请检查一下。希望对您有所帮助，如果您还有其他问题，请告诉我!