Question

thunk中间件在哪里到位？这是我现在看到的中间件的顺序，但是我被困在Thunk进来的地方：

调度promise值设置为true的操作
去了thunk，thunk没有做任何事情，因为它是一个对象，而不是函数
转到promiseErrorMiddleware，它从applyMiddlware获取存储并返回一个函数。
这个函数是否被Thunk截获，即使它已被返回，而不是被调度？谁正确地运行这个函数，它将以动作作为参数返回下一个函数？然后谁将运行最终功能？

商品

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

actionCreator

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

promiseErrorMiddleware＆amp; 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

要记住的一件事是中间件被链接。当您致电text.png时，它会按照您在next()中定义的顺序转到下一个中间件。在中间件链的末尾，操作通过reducer。在您的代码中，该函数永远不会通过applyMiddleware()中间件（因为thunk来自thunk之前）。另一方面，如果你promiseErrorMiddleware这个动作，它将从头开始贯穿整个中间件链。

react redux中间件的流程如何运作？

1 个答案: