angular - 为什么无法修改从 ngRx 状态获取的项目副本？

Question

我有一个组件，它是一个表单页面，它的属性之一如下:

profile: Profile;

当组件加载时，在 ngOnInit 函数中，我抓取我在 ngRx 存储中的配置文件，并将其复制到我在上面定义的 profile 对象变量中:

this.store.pipe(
  take(1),
  select(user)
).subscribe(myUser => {
  this.profile = {...myUser};
  this.profile.details.firstname = "John";
  // ... more setup code

当我尝试将字符串“John”分配给我复制的对象时，它失败并出现错误:

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

为什么会这样？我该如何解决？

我的想法是复制我在商店中的对象，当用户使用我需要的所有数据(电子邮件、名字等)编译我的表单并保存时，使用 ngModel 使用 ngModel 修改它并保存当用户点击提交按钮时商店中的新对象(这次发送一个 Action ，应该是这样)。

This question说传播运算符应该完成这项工作，以便我可以使用副本并在调度操作时将副本作为有效负载传递，但在我的情况下它不起作用，我不明白为什么。

Answer 1

NgRx 存储卡住所有状态对象。要改变它，你应该使用深克隆，而不是浅克隆:

lodash.clonedeep

示例

https://lodash.com/docs/4.17.15#cloneDeep

https://www.npmjs.com/package/lodash.clonedeep

import cloneDeep from 'lodash.clonedeep';

this.store.pipe(
  take(1),
  select(user)
).subscribe(myUser => {
  this.profile = cloneDeep(myUser);
  this.profile.details.firstname = "John";
  // ... more setup code