一个动作在 redux 中遍历整个中间件链意味着什么？

Question

查看 react-redux docs，我不明白为什么让一个动作遍历整个中间件会有用：

It does a bit of trickery to make sure that if you call store.dispatch(action) from your middleware instead of next(action), the action will actually travel the whole middleware chain again, including the current middleware. This is useful for asynchronous middleware, as we have seen previously.

action穿越中间件是什么意思？这对派遣有何影响？我的理解是 dispatch 会随着它经过的每一层中间件而变化，next 指的是前一个 middlware 的 dispatch，而 dispatch 指的是原来的 store.dispatch.

Answer 1

如您在 middleware example 中所见，有多个创建管道的中间件项：

rafScheduler -> timeoutScheduler -> thunk -> vanillaPromise -> etc...

一个动作在到达基本减速器或被其中一个中间件拦截之前遍历所有中间件。每个中间件项都可以使用 next() 决定将操作移动到链中的下一个中间件。然而，有时我们希望动作从一开始就遍历链。

例如，使用 redux thunk，我们分派一个异步操作，该操作将由 thunk 中间件处理。当异步调用成功时，异步操作将分派另一个操作。此操作应从 rafScheduler 中间件重新开始。

如果 dispatch 像下一个一样工作，它会转而前往 vanillaPromise 中间件。为了解决这个问题，dispatch(action)，无论它在哪里被调用，总是从头开始遍历链。

要创建此行为 applyMiddleware() 运行中间件 store => next => action 方法，将 middlewareAPI api 传递给 store 参数，传递并覆盖store.dispatch，带有一个新的分派，即 combined 中间件。这就是魔法发生的地方 - 新的调度是中间件方法链，其中每个调用 next 时调用它之后的一个（next = 下一个中间件方法），最后一个 next() 是旧的 store.dispatch 调用基础减速器：

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer)
    var dispatch = store.dispatch // this is the original dispatch
    var chain = []

    /*** this the store param of the middleware ***/
    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action) 
    }

    /*** store param is applied to old middlewares to create the chain ***/
    chain = middlewares.map(middleware => middleware(middlewareAPI))

    /*** The chain is composed. For all methods in the chain, but the last, next() is the middleware method after it in the chain, the last next is store.dispatch ***/
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store, 
      dispatch // the new dispatch is returned instead of the old
    }
  }
}

一个动作在 redux 中遍历整个中间件链意味着什么？

What does it mean for an action to travel through an entire middleware chain in redux?

javascript

middleware

reactjs

redux

react-redux