Angular 7 没有特定操作的 ngrx 编辑存储

Question

我调用了一个 ngrx 动作，并将结果保存在一个组件局部变量中。如果我编辑此副本，但不保存...并且不执行特定操作，当我离开路线时，商店会自动更新！

我的代码：

this.templatesLoaded
    .pipe(untilComponentDestroyed(this))
    .subscribe((loaded: boolean) => {
      if (loaded) {
        this.templateObs
          .pipe(untilComponentDestroyed(this))
          .subscribe((tmpl: ProjectTemplate) => {
            this.template = { ...tmpl };   // <-- THIS IS MY COPY

我编辑模板删除了一个字段：

deleteField(idx: number): void {
   this.template.fields.splice(idx, 1);
}

现在，如果我离开路线，商店会更新并且 "fields" 减少一个...

怎么可能？

如果我使用 redux Chrome 插件跟踪事件，则不会触发任何操作...只有 ROUTER_NAVIGATION...

感谢大家！

Answer 1

对象剩余展开运算符{ ... }，只复制一层深度。

状态可能因此而改变，要解决这个问题，您必须复制属性，例如

{ fields: ...tmpl.fields }

Angular 7 没有特定操作的 ngrx 编辑存储

Angular 7 ngrx edit store without specific actions

ngrx

angular

ngrx-store

angular7