Angular 10 - NGRX 升级问题：无法添加属性 x 对象不可扩展并且无法分配给对象的只读属性 x答案

【问题标题】：Angular 10 - NGRX Upgrade Issues : Cannot add property x object is not extensible and Cannot assign to read only property x of objectAngular 10 - NGRX 升级问题：无法添加属性 x 对象不可扩展并且无法分配给对象的只读属性 x
【发布时间】：2021-02-23 18:39:45
【问题描述】：

将 Angular 4 升级到 10 和 NGRX 版本（到 v 9）后，我在尝试执行任何操作时遇到多个错误。

每次我进行 http 调用时，我的应用程序都会中断。

我遇到错误，有时没有错误/警告，但页面已损坏。

无法添加属性 xxx，对象不可扩展
无法分配给对象“[object Object]”的只读属性 xxx

【问题讨论】：

标签： javascript angular upgrade ngrx readonly

【解决方案1】：

问题与Angular无关，是NGRX版本升级问题

存储对象是只读的，因此任何在action、reducer、effect和选择器中存储数据的更新都会引发您提到的类似错误

解决这个问题：

如果需要，我们总是需要从选择器发送一个新的引用对对象中的任何类型的更新/赋值操作组件。
避免对有效载荷进行任何形式的更新 store(action/effect/reducer) 做组件的变化。
如果我们想要对有效载荷进行任何修改并在减速器/效果中使用它获取新的参考。

为了创建一个新的参考，你可以使用

...运算符（嵌套对象的棘手操作）
JSON.parse(JSON.stringfy(data))（不完全证明嵌套对象和所有类型）
Object.assign({}, obj);
cloneDeep（如果您使用 lodash）或编写自定义方法来深度克隆对象

另外你可能会遇到一些语法错误，请使用链接

https://ngrx.io/guide/migration 并阅读您要从中迁移的版本的指南

https://ngrx.io/guide/migration/v8

解决方法： 在之前的 NgRx 版本中，运行时不变性检查是可选的。在 9 及更高版本中，不可变运行时检查默认开启。

所以你可以将它设置为 false ：

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, {
      runtimeChecks: {
        strictStateImmutability: false,
        strictActionImmutability: false,
      },
    }),
  ],
})
export class AppModule {}

您的代码将像以前一样工作，但这不是正确的解决方案。

【讨论】：

感谢快速解决方案尝试了解决方案，它对我有用，所有错误都已解决。将实施您提到的其他方法来维护 NGRX 不变性。