Angular NgRx Store按call_id匹配更新数组项，执行后state为空求解决思路

你当前实现的messageCallReceived reducer逻辑存在多处核心错误，是导致calls数组为空、state结构异常的直接原因，具体如下：

错误点梳理 #

• 误用Array.map处理空数组：state.calls初始为空，map遍历空数组不会执行任何逻辑，直接返回空数组，“不存在对应id就新增通话”的逻辑完全无法触发。
• map返回逻辑完全错误：
  1. state.calls是数组不是对象，用字符串类型的call_id作为数组下标取值必然返回undefined，匹配到id时无法正确更新通话项
  2. 未匹配到id时直接返回[...state.calls, call]，会导致map的输出结果变成二维数组，calls结构完全崩溃
• 额外排查点：如果出现state整体为空的情况，需要检查messageReceived reducer的...message展开操作是否存在覆盖calls字段为undefined的情况，以及action触发时是否正确传入了有效call payload。

修复代码 #

直接替换messageCallReceived对应的reducer逻辑即可：

on(KeywordsWebSocketActions.messageCallReceived, (state, { call }) => {
  // 查找已有通话的下标
  const existCallIndex = state.calls.findIndex(
    (existCall) => existCall.call_id === call.call_id
  );
  const updatedCalls = [...state.calls];
  if (existCallIndex >= 0) {
    // 存在对应通话，更新该项
    updatedCalls[existCallIndex] = call;
  } else {
    // 不存在对应通话，追加新项
    updatedCalls.push(call);
  }
  return {
    ...state,
    calls: updatedCalls
  };
})

验证步骤 #

• 在reducer中添加日志，确认messageCallReceived action被正常触发，且传入的call参数包含合法的call_id字段
• 分别验证新增通话、更新已有通话两种场景，确认calls数组的更新结果符合预期
• 检查其余reducer逻辑，避免其他action的操作意外覆盖calls字段

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