Angular 7 ngrx edit store without specific actions

Question

I call a ngrx action, and save the result in a component local variable. If i edit this copy, without saving it... and without specific actions, when i leave the route, the store automatically update!

My code:

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

I edit the template removing a fields:

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

Now, if i leave the route, the store is updated and the "fields" is reduced by one...

How can it be possible?

If i trace the events with redux Chrome plugin, no action are fired... only the ROUTER_NAVIGATION...

Thanks to all!

Answer 1

The object rest spread operator { ... }, only copies one level deep.

The state is probably changed because of this, to fix this you'll have to copy the properties, e.g.

{ fields: ...tmpl.fields }