Question

我正在阅读有关中间件的官方tutorials。

我对这一行中间件代码感到困惑：next(action)

据我了解，next函数实际上是store.dispatch，每个中间件都会调用next(action)，难道它不会多次分派该动作吗？

因此，这里有两个中间件：

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action) // I'm talking about this line
  console.log('next state', store.getState())
  return result
}

const crashReporter = store => next => action => {
  try {
    return next(action) // This line too.
  } catch (err) {
    console.error('Caught an exception!', err)
    Raven.captureException(err, {
      extra: {
        action,
        state: store.getState()
      }
    })
    throw err
  }
}

第3行和第10行都呼叫next(action)，再加上我的第一个store.dispatch(action)，难道该动作不会被发送3次？

这不会破坏应用程序吗？

Answer 1

在applyMiddleware source code中，您对dispatch进行了如下修改：

const fakeStore = {
  getState: store.getState,
  dispatch: (...args) => dispatch(...args)
}
const chain = middlewares.map(middleware => middleware(fakeStore))
dispatch = compose(...chain)(store.dispatch)

compose仅是函数组成。

因此，如果您调用了applyMiddleware(logger, crashReporter)，那么next中间件的参数logger就是crashReporter(fakeStore)，而不是dispatch。

通常，next是下一个中间件（因此得名）。

为什么每个Redux中间件都可以调用next（action），而不是多次调度一个action？

1 个答案: