Redux中getDefaultMiddleware的ignore配置无效，仍报非可序列化值错误

问题描述 #

使用Redux Toolkit时出现以下错误：

serializableStateInvariantMiddleware.ts:234 A non-serializable value was detected in an action, in the path:

原因是CustomItem中的dateTime字段为Dayjs实例（非可序列化类型），尝试通过ignoredPaths或ignoredActions配置忽略检查但未生效，希望忽略整个customs slice的序列化检测。

自定义Slice代码 #

interface CustomItem {
  dateTime: Dayjs
  // 其他字段
}
export interface SomeState {
  customVals: Array<CustomItem>; 
  // 其他状态字段
}

const initialState: SomeState = {
  customVals: new Array<CustomItem>(), 
  // 其他初始值
};
export const customsSlice = createSlice({
  name: 'customs',
  initialState,
  reducers: {
    updateCustoms: (state, action) => {
      // 处理customVals中的日期值
    },
  },
});

无效的Store配置 #

import customReducer from './CustomSlice';

export const store = configureStore({
    reducer: {
      customs: customReducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
          serializableCheck: {
            ignoredPaths: ['customs.customVals'], // 尝试过['customs']
            // 也尝试过ignoredActions: ['customs/updateCustoms']
          },
        }),
});

解决方案 #

1. 彻底忽略整个customs slice的序列化检查 #

如果希望跳过整个customs slice的state和所有相关action的序列化检测，可以通过以下配置实现：

import customReducer from './CustomSlice';

export const store = configureStore({
  reducer: {
    customs: customReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略整个customs slice的state路径
        ignoredPaths: ['customs'],
        // 匹配所有customs slice的action类型（正则表达式）
        ignoredActions: /^customs\//,
        // 如果action的payload中存在非可序列化值，忽略整个payload的检查
        ignoredActionPaths: ['payload'],
      },
    }),
});

2. 针对具体路径精准忽略 #

如果不想完全忽略整个slice，可以更精准地指定忽略路径：

• 忽略state中customVals数组的检查：ignoredPaths: ['customs.customVals']
• 忽略updateCustoms action的payload里的customVals：ignoredActionPaths: ['payload.customVals']
• 忽略单个action类型：ignoredActions: ['customs/updateCustoms']

3. 推荐方案：将非可序列化值转为可序列化类型 #

虽然忽略检查可以解决报错，但更推荐的做法是在存入state前将Dayjs对象转为字符串（如ISO格式），取出时再转回Dayjs实例，保证state的可序列化：

// 更新时转成字符串
const updateCustoms = (customItems: CustomItem[]) => {
  const serializedItems = customItems.map(item => ({
    ...item,
    dateTime: item.dateTime.toISOString()
  }));
  return customsSlice.actions.updateCustoms(serializedItems);
};

// 使用时转回Dayjs
const customVals = useSelector((state: RootState) => 
  state.customs.customVals.map(item => ({
    ...item,
    dateTime: dayjs(item.dateTime)
  }))
);

内容的提问来源于stack exchange，提问作者Feather Ridgemont