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()操作，則該操作將從頭開始貫穿整個中間件鏈。