如何为Redux状态不同部分添加自定义序列化器处理Date类型

Redux默认要求store内的所有内容都是可序列化的值，Date属于非序列化类型，你可以根据自己的使用场景选择以下两种方案实现自定义转换：

方案1：手动轻量化处理（无需额外配置，适合小项目） #

• 写入store时：在slice的reducer逻辑中，将接收到的Date类型属性调用toISOString()方法转为ISO 8601格式的字符串后再存入store
• 读取store时：在selector或者组件中拿到对应的字符串属性后，通过new Date(dateString)即可还原为Date对象使用

方案2：全局自动转换（适合需要批量处理多位置Date属性的场景） #

如果使用Redux Toolkit，可以通过自定义中间件序列化规则，或配合redux-persist实现自动转换：

配置Redux Toolkit序列化检查（避免警告+自动转换） #

import { configureStore } from '@reduxjs/toolkit'
import petReducer from './petSlice'

export const store = configureStore({
  reducer: {
    pets: petReducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 自定义序列化规则，遇到Date类型自动转ISO字符串
        serializer: (value) => {
          if (value instanceof Date) return value.toISOString()
          return value
        },
        // 自定义反序列化规则，符合ISO格式的字符串自动转回Date
        deserializer: (value) => {
          const isISOString = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(value)
          if (typeof value === 'string' && isISOString) return new Date(value)
          return value
        }
      }
    })
})

配合redux-persist实现持久化前后自动转换 #

如果用到了redux-persist做持久化存储，可以创建专属转换规则：

import { createTransform } from 'redux-persist'

// 定义Date类型转换规则
export const dateTransform = createTransform(
  // 持久化存入前的序列化逻辑
  (inboundState) => {
    const traverse = (val) => {
      if (val instanceof Date) return val.toISOString()
      if (Array.isArray(val)) return val.map(traverse)
      if (val && typeof val === 'object') {
        return Object.fromEntries(Object.entries(val).map(([k, v]) => [k, traverse(v)]))
      }
      return val
    }
    return traverse(inboundState)
  },
  // 持久化读取后的反序列化逻辑
  (outboundState) => {
    const traverse = (val) => {
      const isISOString = typeof val === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(val)
      if (isISOString) return new Date(val)
      if (Array.isArray(val)) return val.map(traverse)
      if (val && typeof val === 'object') {
        return Object.fromEntries(Object.entries(val).map(([k, v]) => [k, traverse(v)]))
      }
      return val
    }
    return traverse(outboundState)
  },
  // 仅对pets模块生效，可按需调整白名单/黑名单
  { whitelist: ['pets'] }
)

之后把上述transform添加到redux-persist的配置项中即可生效。

注意事项 #

• 优先选择转ISO 8601字符串，而不是时间戳或自定义格式，该格式自带时区信息，兼容性和还原准确性最高
• 非必要不建议直接关闭Redux的序列化检查，不符合Redux的设计规范，可能导致时间旅行调试、状态持久化等功能异常

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