Redux Toolkit serializableMiddleware不生效：无法屏蔽Firestore Timestamp序列化警告

问题原因 #

你当前的写法是在默认中间件基础上额外添加了一个自定义的serializableMiddleware实例，但Redux Toolkit的getDefaultMiddleware()已经内置了这个中间件。这就导致默认的中间件依然在执行检查，你的自定义配置根本没生效，警告自然不会消失。

正确解决方案 #

不需要手动创建并concat新的中间件，而是直接在getDefaultMiddleware()里传入配置，覆盖默认的serializableMiddleware设置：

import { configureStore, isPlain } from '@reduxjs/toolkit';
import { Timestamp } from 'firebase/firestore';

export const setupStore = () => {
  return configureStore({ 
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => 
      getDefaultMiddleware({
        serializableCheck: {
          // 自定义判断规则，把Firestore Timestamp标记为可序列化
          isSerializable: (value) => 
            value instanceof Timestamp || isPlain(value)
        }
      })
  })
}

补充说明 #

• 如果只是想忽略特定路径的警告，也可以用ignoredPaths配置，比如：

  getDefaultMiddleware({
    serializableCheck: {
      ignoredPaths: ['path.to.timestamp', 'another.path']
    }
  })
  

• 注意isPlain是Redux Toolkit提供的工具函数，用来判断普通对象，不要遗漏导入。

内容的提问来源于stack exchange，提问作者Антон Стецюра