0

I've been using angular-redux on my current project at work for quite a while, recently I noticed very strange behavior and it seemed to me that State is being mutated! Then I've installed redux-freeze and got a lot of object is not extensible errors.

Right now the problematic flow looks like this:

I have a container that has 

@select(selector_name) data: Observable<Data>

to get a slice of data, then I pass the data to a child component like this

<child-component [data]="data | async"...

In the child component I can change some fields of the data object and emit the object back to the container, and then container sends the data to the server.

// child component
@Input() data: Data;
@Output() dataChanged = new EventEmitter<Data>();

someFunction(newFieldData: string) {
 this.data['field'] = newFieldData; // at this point 'object is not extensible' error is thrown
 this.dataChanged.emit(this.data);
}

What is the right way of doing basically the same but also prevent object is not extensible error from happening?

Chaz Ashley
  • 389
  • 1
  • 15
  • please assign data to another object then change object property as per your requirement then pass to emitter. – Ronak Patel Mar 01 '19 at 15:08
  • @RonakPatel the data object can also be used in the two-way binding in a template. Does it mean that every such object basically should be intercepted in the ngOnChanges, and then assigning to another object using {...data} so we get a copy of it ? – Chaz Ashley Mar 01 '19 at 15:16

0 Answers0