从 Angular 中的 RXJS/NGRX 商店获取要在组件中编辑的不可变项的最佳实践
Best practice for getting an immutable item to edit in a component from an RXJS/NGRX store in Angular
本周我们已将 Angular v9 应用程序升级到 v11 和 RXJS v6.6。在大多数情况下，这一切都非常顺利，但由于商店现在处于冻结模式，我们在之前更新商店的代码中遇到了一些错误。
虽然其中大部分是我们用来更新 reducer 中的存储的辅助方法（并且很容易重构），但我们在编辑组件中使用的一种常见方法会导致问题。
我们一般在编辑一个完整的组件中做如下操作model/item:
- 使用 RXJS 运算符从商店获取商品，例如过滤器、地图等
- 在订阅内的组件上将其设置为 属性（因为您无法编辑可观察对象）
- 尝试通过视图中的 ngModel 或组件内的其他代码进行编辑
这会导致“无法分配给只读 属性...”错误。在大多数情况下，通过使用展开或 Object.assign() 创建浅拷贝是可行的，但对于我们更复杂的对象，这并不适用，因为我们需要深拷贝。
有没有一种 better/proper 方法可以从 RXJS/NGRX 商店获取项目进行编辑，而无需使用自定义代码在组件中创建它的深层副本？目前我们正在解决 JSON.parse(JSON.stringify(Object)) 的问题，但感觉不对！
这可能无法回答您的问题，但希望它能为您提供一些启示。
假设您订阅了一个对象到您的商店并修改了该对象的 属性，您实际上将更改商店和本地的 属性，因为对象和数组是引用类型。您应该更改商店中属性的唯一方法是通过操作，并且更新应该在 reducer 中不可变地发生以启用时间旅行调试。
这个 应该有助于解释更多。
至于创建副本的技术，我认为像您提到的 Object.assign 和 JSON.parse(JSON.stringify(Object)) 似乎没问题。
其他方法是散布数组 [...array] 以创建副本以及散布对象以创建副本 { ...object }。
本周我们已将 Angular v9 应用程序升级到 v11 和 RXJS v6.6。在大多数情况下，这一切都非常顺利，但由于商店现在处于冻结模式，我们在之前更新商店的代码中遇到了一些错误。
虽然其中大部分是我们用来更新 reducer 中的存储的辅助方法（并且很容易重构），但我们在编辑组件中使用的一种常见方法会导致问题。
我们一般在编辑一个完整的组件中做如下操作model/item:
- 使用 RXJS 运算符从商店获取商品，例如过滤器、地图等
- 在订阅内的组件上将其设置为 属性（因为您无法编辑可观察对象）
- 尝试通过视图中的 ngModel 或组件内的其他代码进行编辑
这会导致“无法分配给只读 属性...”错误。在大多数情况下，通过使用展开或 Object.assign() 创建浅拷贝是可行的，但对于我们更复杂的对象，这并不适用，因为我们需要深拷贝。
有没有一种 better/proper 方法可以从 RXJS/NGRX 商店获取项目进行编辑，而无需使用自定义代码在组件中创建它的深层副本？目前我们正在解决 JSON.parse(JSON.stringify(Object)) 的问题，但感觉不对！
这可能无法回答您的问题，但希望它能为您提供一些启示。
假设您订阅了一个对象到您的商店并修改了该对象的 属性，您实际上将更改商店和本地的 属性，因为对象和数组是引用类型。您应该更改商店中属性的唯一方法是通过操作，并且更新应该在 reducer 中不可变地发生以启用时间旅行调试。
这个
至于创建副本的技术，我认为像您提到的 Object.assign 和 JSON.parse(JSON.stringify(Object)) 似乎没问题。
其他方法是散布数组 [...array] 以创建副本以及散布对象以创建副本 { ...object }。