使用Redux Toolkit Reducer更新指定聊天会话消息的问题

问题原因分析 #

1. current() 获取的对象无法修改（只读报错） #

current() 是Redux Toolkit提供的查看当前state不可变快照的工具，返回的对象是只读状态，仅用于查看状态，不能直接修改。对这个快照的messages执行push操作，必然触发只读属性报错。

2. state.chats.find() 返回undefined #

核心原因有两点：

• 变量/字段引用混乱：代码里存在多处字段不匹配的情况，比如reducer里一会儿用msg.chatId，一会儿又定义chatId作为payload字段；slice中的updateChatData依赖msg属性，但调用时传递的msg结构是否包含正确的chatId？
• chatId匹配失败：要么state.chats数组为空，要么socket传来的msg.chatId和现有会话的chatId类型/值不匹配（比如数字1和字符串"1"），导致找不到对应会话。

正确实现代码 #

修正后的chatSlice reducer #

const initialState: ChatsState = {
  chats: [],
  isAllowedExpand: true
};

export const chatsSlice = createSlice({
  name: 'chats',
  initialState,
  reducers: {
    setChatsData: (state, action: PayloadAction<Array<Chat>>) => {
      state.chats = action.payload;
    },
    setIsAllowedExpand: (state, action: PayloadAction<boolean>) => {
      state.isAllowedExpand = action.payload;
    },
    updateChatData: (state, action: PayloadAction<{ msg: { chatId: number; /* 补充你的消息结构 */ }, msgEntry: string }>) => {
      const { msg } = action.payload;
      // 直接在state中查找目标会话，无需current()
      const targetChat = state.chats.find(chat => chat.chatId === msg.chatId);

      if (targetChat) {
        // 根据消息动作类型处理不同逻辑
        switch (msg.action) {
          case 'ReceivedNewMessage':
          case 'SentNewMessage':
          case 'create':
            targetChat.messages.push(msg);
            break;
          case 'delete':
            // 假设消息有唯一id，过滤删除对应消息
            targetChat.messages = targetChat.messages.filter(message => message.id !== msg.id);
            break;
        }
      } else {
        // 无对应会话时新增（根据业务需求调整）
        state.chats.push({
          chatId: msg.chatId,
          messages: [msg]
        });
      }
    }
  }
})

关键注意事项 #

• 直接操作state对象：Redux Toolkit的Immer会自动将可变操作转换为符合Redux要求的不可变更新，完全不需要用current()修改状态。
• 统一字段引用：确保payload传递的字段和reducer中使用的字段完全一致，避免变量名混乱导致的匹配失败。
• 校验chatId一致性：确认socket传来的msg.chatId和现有会话的chatId类型、值完全相同，比如统一用数字或字符串类型。
• 处理边界情况：找不到对应会话时，根据业务需求选择新增会话或忽略操作，避免无意义错误。

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