getDefaultMiddleware

傳回包含預設 middleware 清單的陣列。

預期用途

預設情況下，configureStore 會自動將一些 middleware 加入 Redux store 設定中。

const store = configureStore({
  reducer: rootReducer,
})

// Store has middleware added, because the middleware list was not customized

如果您想要自訂 middleware 清單，可以提供一個 middleware 函式陣列給 configureStore

const store = configureStore({
  reducer: rootReducer,
  middleware: () => new Tuple(thunk, logger),
})

// Store specifically has the thunk and logger middleware applied

但是，當您提供 middleware 選項時，您有責任定義要加入 store 中的所有 middleware。configureStore 除了您列出的項目之外，不會加入任何其他 middleware。

如果您想要加入一些自訂 middleware，但同時也想要加入預設 middleware，getDefaultMiddleware 會很有用

import { configureStore } from '@reduxjs/toolkit'

import logger from 'redux-logger'

import rootReducer from './reducer'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
})

// Store has all of the default middleware added, _plus_ the logger middleware

建議使用傳回的 Tuple 的可串接 .concat(...) 和 .prepend(...) 方法，而不是陣列展開運算子，因為後者在某些情況下會遺失有價值的 TS 型別資訊。

包含的預設中間件

開發

Redux Toolkit 的目標之一是提供有見地的預設值並防止常見錯誤。作為其中一部分，getDefaultMiddleware 包含一些中間件，這些中間件僅新增至應用程式的開發版本中，以提供執行時期檢查，用於處理三個常見問題

• 不可變性檢查中間件：深入比較狀態值是否發生變異。它可以在調度期間偵測簡化器中的變異，以及調度之間發生的變異（例如在組件或選擇器中）。當偵測到變異時，它會擲回錯誤並指出在狀態樹中偵測到變異值的關鍵路徑。（從 redux-immutable-state-invariant 分岔。）

• 可序列化檢查中間件：專門為在 Redux Toolkit 中使用而建立的客製化中間件。概念類似於 immutable-state-invariant，但會深入檢查你的狀態樹和動作，以找出不可序列化的值，例如函式、承諾、符號和其他非純 JS 資料值。當偵測到不可序列化值時，會印出主控台錯誤，並附上偵測到不可序列化值的關鍵路徑。

• 動作建立器檢查中間件：專門為在 Redux Toolkit 中使用而建立的另一種客製化中間件。識別動作建立器在未呼叫的情況下錯誤地被調度，並以動作類型發出主控台警告。

除了這些開發工具中間件之外，它還預設新增 redux-thunk，因為 thunk 是 Redux 推薦的基本副作用中間件。

目前，傳回值為

const middleware = [
  actionCreatorInvariant,
  immutableStateInvariant,
  thunk,
  serializableStateInvariant,
]

製作

目前，傳回值為

const middleware = [thunk]

自訂包含的中間件

getDefaultMiddleware 接受一個選項物件，允許以兩種方式自訂每個中間件

• 每個中間件都可以透過傳遞 false 給其對應的欄位，從結果陣列中排除
• 每個中間件都可以透過傳遞其對應欄位的匹配選項物件，來自訂其選項

此範例顯示排除可序列化狀態檢查中間件，並傳遞 thunk 中間件的「額外參數」一個特定值

TypeScript

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: myCustomApiService,
      },
      serializableCheck: false,
    }),
})

JavaScript

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: myCustomApiService,
      },
      serializableCheck: false,
    }),
})

API 參考

interface ThunkOptions<E = any> {
  extraArgument: E
}

interface ImmutableStateInvariantMiddlewareOptions {
  // See "Immutability Middleware" page for definition
}

interface SerializableStateInvariantMiddlewareOptions {
  // See "Serializability Middleware" page for definition
}

interface ActionCreatorInvariantMiddlewareOptions {
  // See "Action Creator Middleware" page for definition
}

interface GetDefaultMiddlewareOptions {
  thunk?: boolean | ThunkOptions
  immutableCheck?: boolean | ImmutableStateInvariantMiddlewareOptions
  serializableCheck?: boolean | SerializableStateInvariantMiddlewareOptions
  actionCreatorCheck?: boolean | ActionCreatorInvariantMiddlewareOptions
}

function getDefaultMiddleware<S = any>(
  options: GetDefaultMiddlewareOptions = {},
): Middleware<{}, S>[]