Redux-Toolkit中用for循环处理服务端数据触发中间件耗时警告问题

• 核心是Redux Toolkit默认在开发环境开启了SerializableStateInvariantMiddleware中间件，用于检查State和Action是否符合可序列化要求，当检查耗时超过32ms就会抛出该警告。
• 你当前代码中将Expenses类实例存入了Redux State，类实例不属于可序列化的普通JS对象，中间件遍历检查这类结构时会大幅增加耗时，若你的数据量较大，耗时就会超出阈值。

1. 调整State结构，不存储类实例（官方推荐） #

Redux官方要求State始终使用普通对象、数组、基础类型等可序列化结构，你可以做如下调整：

• 服务端返回数据处理时直接转为普通对象存入State，不要newExpenses实例
• 如果业务逻辑需要用到Expenses类的方法，可在组件读取State时再临时转换为类实例，或者将Expenses的方法抽离为通用工具函数，直接操作普通对象即可。

2. 配置中间件忽略指定字段的检查 #

如果你确实需要将类实例存入State，可以配置中间件跳过对应字段的序列化检查，减少耗时：

import { configureStore } from '@reduxjs/toolkit'
import yourReducer from './yourSlice'

export const store = configureStore({
  reducer: {
    yourSliceName: yourReducer
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: {
      // 替换为你实际的State路径，忽略该字段的序列化检查
      ignoredPaths: ['yourSliceName.expensesState']
    }
  })
})

3. 直接关闭序列化检查（不推荐） #

如果数据量极大，不需要序列化检查能力，也可以直接关闭该中间件：

export const store = configureStore({
  reducer: {
    yourSliceName: yourReducer
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: false
  })
})

注：该中间件仅在开发环境生效，生产环境默认关闭，不会影响线上性能，但建议优先从State结构层面解决问题，避免后续出现不可预期的序列化相关bug。

内容的提问来源于stack exchange，提问作者Robert smith