可序列化中间件

这是一个自定义中间件，可以检测状态或分派的操作中是否包含任何非可序列化的值，其模型来自redux-immutable-state-invariant。任何检测到的非可序列化的值都将被记录到控制台。

这个中间件默认由configureStore和getDefaultMiddleware添加到存储中。

你可以通过将任何支持的选项作为getDefaultMiddleware的serializableCheck值来自定义此中间件的行为。

选项

interface SerializableStateInvariantMiddlewareOptions {
  /**
   * 检查一个值是否被认为是可序列化的函数。
   * 这个函数会递归应用到状态中的每一个值。
   * 默认为`isPlain()`。
   */
  isSerializable?: (value: any) => boolean
  /**
   * 将用于从每个值中检索条目的函数。
   * 如果未指定，将使用`Object.entries`。
   * 默认为`undefined`。
   */
  getEntries?: (value: any) => [string, any][]

  /**
   * 在检查可序列化性时忽略的操作类型的数组。
   * 默认为[]
   */
  ignoredActions?: string[]

  /**
   * 在检查可序列化性时忽略的由点分隔的路径字符串或正则表达式的数组。
   * 默认为['meta.arg', 'meta.baseQueryMeta']
   */
  ignoredActionPaths?: (string | RegExp)[]

  /**
   * 在检查可序列化性时忽略的由点分隔的路径字符串或正则表达式的数组。
   * 默认为[]
   */
  ignoredPaths?: (string | RegExp)[]
  /**
   * 执行时间警告阈值。如果中间件的执行时间超过`warnAfter`毫秒，
   * 控制台将显示警告。默认为32ms。
   */
  warnAfter?: number

  /**
   * 选择不检查状态。当设置为`true`时，将忽略其他与状态相关的参数。
   */
  ignoreState?: boolean

  /**
   * 选择不检查操作。当设置为`true`时，将忽略其他与操作相关的参数。
   */
  ignoreActions?: boolean
}

导出

createSerializableStateInvariantMiddleware

使用给定的选项创建一个可序列化检查中间件的实例。

你最可能不需要自己调用这个，因为getDefaultMiddleware已经这样做了。

示例：

// 文件：reducer.ts noEmit

export default function (state = {}, action: any) {
  return state
}

// 文件：store.ts

import { Iterable } from 'immutable'
import {
  configureStore,
  createSerializableStateInvariantMiddleware,
  isPlain,
  Tuple,
} from '@reduxjs/toolkit'
import reducer from './reducer'

// 增强中间件以将Immutable.JS迭代器视为可序列化
const isSerializable = (value: any) =>
  Iterable.isIterable(value) || isPlain(value)

const getEntries = (value: any) =>
  Iterable.isIterable(value) ? value.entries() : Object.entries(value)

const serializableMiddleware = createSerializableStateInvariantMiddleware({
  isSerializable,
  getEntries,
})

const store = configureStore({
  reducer,
  middleware: () => new Tuple(serializableMiddleware),
})

isPlain

检查给定的值是否被认为是"普通值"。

目前的实现为：

// 文件：src/isPlainObject.ts noEmit

declare function isPlainObject(value: unknown): value is object
export default isPlainObject

// 文件：src/serializableStateInvariantMiddleware.ts
import isPlainObject from './isPlainObject'

export function isPlain(val: any) {
  return (
    typeof val === 'undefined' ||
    val === null ||
    typeof val === 'string' ||
    typeof val === 'boolean' ||
    typeof val === 'number' ||
    Array.isArray(val) ||
    isPlainObject(val)
  )
}

这将接受所有标准的JS对象、数组和原始值，但对于Date、Map和其他类似的类实例，返回false。