NgRx中更新对象属性报错：无法赋值给只读属性'dayWorked'

问题场景 #

尝试在NgRx中更新数组内对象的单个属性，已知Redux不可直接修改对象，但实现代码报错：

代码示例 #

const updateMonthForecast = (monthParam: string, dayWorked: number) => {
    const copyState = [...initialState];

    copyState.find((month) => month.month === monthParam).dayWorked = dayWorked;

    return [...copyState];
}

初始状态数组 #

const initialState = [
    {
        month: "january",
        dayWork: 22,
        dayWorked: 0,
        CA: 0
    },
    {
        month: "februrary",
        dayWork: 20,
        dayWorked: 0,
        CA: 0
    },
]

报错信息 #

ERROR TypeError: Cannot assign to read only property 'dayWorked' of object '[object Object]'

问题根源 #

[...initialState]只是对数组做了浅拷贝，数组里的每个对象还是和原状态指向同一个内存引用。NgRx会将状态对象设置为只读（防止直接修改违反不可变原则），所以直接修改对象的dayWorked属性会触发只读错误。

正确实现 #

要严格遵循不可变更新原则，需要为匹配到的目标对象创建全新的副本，而非直接修改原对象。可以用Array.map()遍历数组，仅对目标月份生成新对象：

const updateMonthForecast = (monthParam: string, dayWorked: number) => {
  return initialState.map(monthItem => {
    if (monthItem.month === monthParam) {
      // 拷贝原对象所有属性，覆盖要更新的字段
      return { ...monthItem, dayWorked };
    }
    // 非目标对象直接返回，无需拷贝
    return monthItem;
  });
};

额外提示 #

如果项目中使用了@ngrx/entity，可以用updateOne这类实体操作符来简化数组内对象的更新逻辑，代码会更简洁且符合NgRx最佳实践。

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