Angular2 / Typescript / ngRx - TypeError：无法分配给对象的只读属性

Question

In the constructor I do something like this

selectedDate: Object;
// construtor
this.selectedDate = {};
this.selectedDate['date'] = new Date();
this.selectedDate['pristine'] = new Date();

In another function which gets called on a button click I do the following:

this.selectedDate['date'] = new Date(this.selectedDate['pristine']);

And I get the following error:

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

Answer 1

Credits to Ryan Q:

As Ryan commented I was using ngRx in my app and I was indeed passing this.selectedDate object through an action into the store and hence I was not able to modify the object that is stored in the State.

One way to resolve this is pass a new object reference and this should resolve the issue:

this.store.dispatch(new settime.DateChangeAction(Object.assign({}, this.selectedDate)));

Answer 2

@vikas' answer put me on the right track to solve a similar issue.

I'm trying to handle an upload, where I want to display the progress:
- From the UploadComponent , I emit an event to the parent
- The parent dispatch an action to the store
- An effect catches the action, call the service to upload the file (which returns an array with two observables: progress$ and result$ )
- The effect dispatch an HttpProgress action which contains the observable

And at this point I had a similar issue. After digging into store freeze code, a coworker and I found out that it also deep freeze the action.payload . And thus, passing an observable results into an error as observable state is mutated internally.

I'm not using the payload to keep it into the store, just so I can register to actions$ within my component so here it doesn't matter if I pass a mutable object into the payload. To avoid that error, I just wrapped the observable into a function as deep freeze do not freeze functions.