Angular ngrx: TypeError: Cannot freeze array buffer views with elements

user_8155129 0
Viewed 1292

Im encountering an issue with ngrx. I have an array in my state to which i want to append objects. This actually works fine if i console.log them i can see that values in my store. But the redux dev tools and the console throw the error "TypeError: Cannot freeze array buffer views with elements".

I have a state that looks like this:

const state: State = {
  array: []
};

The Object i pass to my actions looks similar to this:

const obj = {attr: number, data: ImageData};

Where ImageData comes from a Canvas and is extracted with canvas.getContext("2d").getImageData(...);. It should be noted that this Object is huge with over 69000 keys with values from 0 to 255(RGBA).

And i append the new Object to the state/store like this:

createReducer(
  initialState,
  on(action, (state: State, action)=> {
    return {
      ...state,
      array: [...state.array, action.payload]
    }
  })
);

Furthermore i read that i should deepCopy Objects before passing them to the action so i did that with lodashs copyDeep(), but i got the same results.

Any help is appreciated.

ngrx redux angular javascript
3 Answers

You need state.array in your reducer.

return {
  ...state,
  array: [...state.array, action.payload]
}
user_16791260

I had the same problem, I solved it by cloning the data that I pass to the dispatch method

ex:

const dataCloned = CloneDataInDeep.clone(dataToAdd);
this.store$.dispatch(actionToDispatch({ dataCloned}));

Another option that I have tried is to change this attribute value "strictActionImmutability" in the ngrx configuration from true to false

runtimeChecks: {
  strictActionImmutability: false,
  ....
}
user_143369240

I use Angular and came across that error.

For me, deep copying the array before the dispatch worked

const copyArray = JSON.parse(JSON.stringify(array));
this.store.dispatch(actionDispatch.requestSth({ myArray: copyArray }));

Not the most beautiful solution, I know.

Edit: Unfortunately the solution was not helpful because the objects inside the array lose the functions when strigified... So back to square one

user_122135550
Related