NGRX中如何按字符串id查找对象并替换对象数组中的对应项

API 探路者

2026-10-7

问题原因排查

Action Type重复：你当前定义的updateQueueDataItem的标识为[Queue] Update Queue Data，和负责追加数据的updateQueueData的Action Type大概率完全重复。NGRX中Action Type是全局唯一标识，重复会导致两个Action对应的Reducer回调都被触发，先执行替换逻辑，再执行追加逻辑，最终就会出现旧项被替换、同时又新增一个相同对象的问题。
id类型不匹配：如果传入payload的id类型和数组中已有项的id类型不一致（比如一个是数字1、一个是字符串"1"），全等判断===会返回false，不会触发替换逻辑，若同时有追加逻辑触发就会新增对象。
同时触发了两个Action：检查业务代码是否同时调用了updateQueueData和updateQueueDataItem两个Action。

修复方案

1. 修正重复的Action Type

将updateQueueDataItem的Action Type改为唯一值，避免和追加逻辑的Action冲突：

export const updateQueueDataItem = createAction(
  '[Queue] Update Queue Data Item', // 修改为唯一标识
  props<{payload: IQueue}>(),
);

2. 优化Reducer逻辑（可选）

如果需要实现「id存在则替换、不存在则追加」的通用逻辑，可以把对应Reducer修改为如下形式：

on(queueActions.updateQueueDataItem, (state, action) => {
  const targetExists = state.queueData.some(item => item.id === action.payload.id);
  if (targetExists) {
    return {
      ...state,
      queueData: state.queueData.map(item => item.id === action.payload.id ? action.payload : item)
    };
  }
  return {
    ...state,
    queueData: [...state.queueData, action.payload]
  };
}),