Cannot add property X, object is not extensible after ngrx 9 update

I refer change list of Ngrx version 8 to 9 and migration guideline here

https://ngrx.io/guide/migration/v9

As I found there is a special change related to immutability with angular 9. They have defined Action, state and serializability related immutability logic there. And I tried out the method that they have suggested to resolve those issues with Ngrx V9 update here

https://ngrx.io/guide/store/configuration/runtime-checks

You can make following change,

@NgModule({
  imports: [
  StoreModule.forRoot(reducers, {
    runtimeChecks: {
      strictStateImmutability: false,
      strictActionImmutability: false,
    },
  }),
 ],
})
export class AppModule {}

@ngrx/store ships with five (5) built-in runtime checks. Try disabled all checks

You can use cloneDeep function from lodash library to deep clone the object and avoid the error:

import {cloneDeep} from 'lodash';

const clonedData = cloneDeep(myDataArray);

Then, you can add properties or all that you want to clonedData object.

Regards!

You should deep-clone myDataArray because it's coming out from the store through a selector. Keeping the immutability of the data in the store is an important part of redux pattern and you'd be changing the data directly in the store if you modify myDataArray (depending on your selector, it could be the same data => a reference to the array in the store).

You can do myDataArray = JSON.parse(JSON.stringify(myDataArray)) before trying to make any change in it.

There are more efficient ways of deep-cloning an object, for example using fast-copy:

import copy from 'fast-copy';

...

myDataArray = copy(myDataArray);