React Redux中间件的流程如何工作？

Question

笨拙的中间件在哪里出现？ 这是我现在看到的中间件的顺序，但是我陷入了Thunk进入的位置：

1. 调度将promise值设置为true的操作
2. 变得笨拙，笨拙不做任何事情，因为它是一个对象，而不是函数
3. 转到promiseErrorMiddleware，它从applyMiddlware获取存储并返回一个函数。
4. Thunk是否已返回但未调度该函数，但该函数是否被Thunk拦截？ 谁确切地运行此函数，该函数将以该操作作为参数返回下一个函数？ 谁来运行最终功能？

商店

const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware, promiseErrorMiddleware, dataTrafficMiddleware)
)

actionCreator

dispatch({url: requestURL, promise: true})

promiseErrorMiddleware和dataTrafficMiddleware

const promiseErrorMiddleware = function (store) { //where is store from, applyMiddleware?
      return function (next) { //where is next from?
        return function (action) {
          if (!action.promise) {
            return next(action)
          } else {
            return fetch(action.url).then(function (data) {
              ...
              next({data, needDirection: true})
            })
          }
        }
      }
    }

const dataTrafficMiddleware = function (store) {
  return function (next) {
    return function (action) {
      if (!action.needDirection) {
        return next(action)
      } else {
        //dispatch regular action with type and data
      }
      }
    }
  }
}

Answer 1

要记住的一件事是中间件是链接在一起的。 当您调用next()它将按照您在applyMiddleware()定义它们的顺序转到下一个中​​间件。 在中间件链的末尾，操作通过化简器进行。 在您的代码中，该函数永远不会通过thunk中间件传递（因为thunk在promiseErrorMiddleware之前）。 另一方面，如果您dispatch()操作，则该操作将从头开始贯穿整个中间件链。