更新ngrx state时修改task数组元素触发只读报错的问题咨询

NgRx默认开启运行时状态校验规则，会把整棵状态树做对象冻结处理，状态内所有的对象、数组都属于只读属性，任何直接修改原状态结构的操作都会直接抛出只读错误。
两个版本实现的报错触发点：

• 第一版代码中直接执行state.company.tasks[index] = { ...state.company.tasks[index], ...action.task }，本质是对原状态下tasks数组的指定下标元素做直接赋值修改，属于触碰被冻结的只读结构，必然触发报错。且后续return时tasks字段仍直接引用原数组，就算没有报错，NgRx也会因为数组引用未变化，识别不到这次状态变更，无法触发视图更新。
• 第二版代码中在map回调里直接执行item.name = action.name，这里的item是原状态树存储的task实例，本身处于只读冻结状态，直接给对象属性赋值的操作会立刻触发报错。就算跳过只读报错的限制，该写法在匹配分支没有return返回值，最终生成的newTasks数组对应元素会是undefined，直接引发状态异常。

NgRx对状态更新的核心要求是不可变原则：绝对不修改原状态的任何属性，所有涉及变更的层级，都要生成新的对象/数组引用。
适配你现有action结构的正确实现代码：

on(CompanyAction.editTask, (state, action): CompanyState => {
  // map方法返回全新数组，全程不修改原tasks数组
  const updatedTasks = state.company.tasks.map(task => {
    // 非目标元素直接复用原引用，不需要额外创建对象
    if (task.id !== action.taskId) return task;
    // 匹配到目标元素：基于原task的全量属性，叠加action传入的待更新属性，生成全新的task对象
    return { ...task, ...action.task };
  });

  // 逐层生成新引用，不触碰原状态结构
  return {
    ...state,
    company: {
      ...state.company,
      tasks: updatedTasks
    }
  };
})

这种写法的优势：

• 全程没有修改任何原状态的属性，完全规避只读报错
• 仅对匹配id的目标task创建新对象，其余元素直接复用原引用，没有不必要的对象拷贝，性能最优
• 因为map生成的是全新数组，company层做对象展开生成新实例，最终返回的state也是全新引用，NgRx可以正常识别状态变更，触发视图更新。

这种仅传入待更新属性的Action实现方式完全合规，且是NgRx社区普遍推荐的设计模式。

• NgRx从未强制要求Action必须携带完整的待更新对象，只要Action语义清晰、类型定义严谨，就符合规范
• 仅传入待更新的部分属性反而有实际开发优势：
  • 减少Action的payload体积，避免无意义的完整对象传输
  • 明确操作边界，仅覆盖action中传入的字段，不会意外覆盖其他未改动的状态内容
• 只需在定义Action Creator时把payload类型标注准确即可，例如把参数类型定义为taskId: number, task: Partial<Task>，就能保证全链路的类型安全，不存在任何合规性问题。

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