react redux中间件的流程是如何工作的

Question

中间件在哪里发挥作用?这是我现在看到的中间件的顺序但是我不知道Thunk是怎么进来的:

1. 调度promise值设置为true的动作
2. 转到thunk, thunk不处理它因为它是一个对象，不是函数
3. 转到promiseErrorMiddleware，它从applyMiddlware获取存储并返回一个函数。
4. 这个函数被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()操作，它将从一开始运行整个中间件链。