getDefaultMiddleware

返回包含默认中间件列表的数组。

预期用法

默认情况下，configureStore 会自动将一些中间件添加到 Redux 商店设置中。

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

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

如果您想自定义中间件列表，可以向 configureStore 提供一个中间件函数数组。

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

// Store specifically has the thunk and logger middleware applied

但是，当您提供 middleware 选项时，您需要负责定义要添加到存储中的所有中间件。configureStore 不会添加您列出的以外的任何额外中间件。

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 包含一些中间件，这些中间件仅在您的应用程序的开发版本中添加，以提供针对三个常见问题的运行时检查。

• 不变性检查中间件：深度比较状态值以查找突变。它可以在调度期间检测 reducer 中的突变，以及调度之间发生的突变（例如在组件或选择器中）。当检测到突变时，它将抛出错误并指示在状态树中检测到突变值的键路径。（从 redux-immutable-state-invariant 分叉。）

• 可序列化检查中间件：专门为在 Redux Toolkit 中使用而创建的自定义中间件。与 immutable-state-invariant 的概念类似，但它深度检查您的状态树和您的操作以查找不可序列化的值，例如函数、Promise、Symbols 和其他非纯 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>[]