日期转时间戳字符串后经NgRx发送变回日期的问题排查求助

我来帮你捋捋这个问题——这种"本地打印正常，dispatch后数据变样"的情况，大概率是序列化/反序列化的自动转换在暗中搞鬼，咱们一步步拆解：

可能的核心原因 #

1. NgRx 状态序列化的自动转换
   NgRx 默认会用 JSON 序列化机制处理 Store 状态，虽然常规的 JSON.stringify/parse 不会把数字字符串转成 Date，但如果你的项目配置了自定义序列化器、meta reducer，或者 NgRx DevTools 的自动序列化逻辑，有可能触发额外的类型转换。比如某些工具会尝试把看起来像时间戳的字符串解析成 Date 对象。

2. HTTP 请求链路的拦截器处理
   如果你的 Angular 项目里有全局 HTTP 拦截器，可能在请求发送前对请求体做了遍历处理——比如某些日期工具库的自动转换逻辑，会把数字格式的字符串识别为时间戳并转成 Date 对象。

3. TypeScript 类型定义的误导
   如果你的 IDatesPhases 接口里，sDateStart/sDateEnd 的类型定义不是严格的 string（比如写成了 Date | string），可能会让某些运行时的类型检测工具误判，触发自动转换。

分步排查方案 #

1. 先定位转换发生的阶段 #

在 NgRx Effect 里先打印收到的数据，确认转换是在 dispatch 后到 Effect 前发生的，还是在发送请求时发生的：

addCommittee$ = createEffect(() => 
  this.actions$.pipe(
    ofType(AddCommitteePending),
    tap(action => {
      console.log('Effect 收到的数据:', action.committeeData.aDatesPhases);
      // 检查这里的 sDateStart/sDateEnd 是字符串还是 Date 对象
    }),
    // 后续请求逻辑
  )
);

2. 排除 NgRx DevTools 的干扰 #

DevTools 默认的序列化逻辑可能会修改状态，你可以暂时关闭它的序列化功能试试：

// 在 Store 配置里修改
StoreModule.forRoot(reducers, {
  // ...其他配置
  devtools: {
    serialize: false, // 关闭自动序列化
  },
})

如果关闭后问题消失，说明是 DevTools 的序列化逻辑在搞鬼。

3. 检查全局 HTTP 拦截器 #

遍历项目里的 HTTP 拦截器，看看有没有对请求体做字段转换的逻辑——比如有没有代码会遍历对象属性，把数字字符串转成 Date：

// 示例：拦截器里的可疑代码
if (typeof value === 'string' && !isNaN(Number(value))) {
  // 错误地把时间戳字符串转成 Date
  return new Date(Number(value));
}

4. 测试 JSON 序列化的影响 #

手动模拟 NgRx 的序列化过程，看看转换是否发生在这一步：

const serialized = JSON.stringify(this.committeeData);
const deserialized = JSON.parse(serialized);
console.log('JSON 反序列化后的数据:', deserialized.aDatesPhases);

如果这里的字段已经变成 Date 对象，说明是 JSON 反序列化的自定义 reviver 函数导致的（比如项目里全局修改了 JSON.parse 的行为）。

5. 验证接口类型定义 #

确保 IDatesPhases 接口的字段类型是严格的 string：

interface IDatesPhases {
  sDateStart: string;
  sDateEnd: string;
  // 其他属性
}

如果类型定义模糊，可能会让 TypeScript 的类型检查失效，导致运行时的意外转换。

快速解决方案 #

如果排查后确认是字符串转 Date 的自动转换问题，可以换一种方式存储时间戳：直接存数字类型而非字符串。这样 JSON 序列化时会保留数字类型，不会被误转成 Date：

const temp = this.committeeInfo.aDatesPhases.map((item): IDatesPhases => { 
  return { 
    ...item, 
    sDateStart: new Date(item.sDateStart).getTime(), // 直接存数字时间戳
    sDateEnd: new Date(item.sDateEnd).getTime(), 
  }; 
});

同时把接口里的字段类型改成 number，这样前后端交互也更清晰。

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