如何移除Reducer中的JSON.parse与JSON.stringify方法

当然可以优化，你当前用JSON序列化/反序列化做深拷贝，主要是为了遵守状态管理的immutable规则，但这种方式不仅性能开销大，还会丢失Date类型的原始引用（JSON会把Date转成字符串，反序列化后无法还原成Date对象）。下面是优化后的代码：

on(MatchActions.AddMessage, (state: MatchState, payload: { message: Message }) => {
    // 浅拷贝顶层的消息字典对象，避免直接修改原state
    const messages: MessageDictionary = { ...state.chat.messages };
    const dateKeys = Object.keys(messages);

    if (dateKeys.length > 0) {
        const latestDateKey = dateKeys[dateKeys.length - 1];
        // 对要修改的消息数组做拷贝，再添加新消息，保证immutable
        messages[latestDateKey] = [...messages[latestDateKey], payload.message];
    } else {
        messages[getNowUtc().toString()] = [payload.message];
    }

    return {
        ...state,
        chat: {
            ...state.chat,
            messages
        }
    };
}),

关键优化点说明 #

• 替换深拷贝方式：用对象展开语法{...state.chat.messages}替代JSON方法，只浅拷贝顶层字典对象，性能更优。
• 数组的immutable处理：当需要给已有日期的消息列表添加新消息时，用数组展开语法[...原数组, 新消息]创建新数组，而不是直接修改原数组的引用，确保原state不会被意外修改。
• 保留Date类型：避免了JSON序列化导致的Date对象转字符串问题，message.messageSendUtc会保持原始的Date类型。

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