NgRx-etc: Cannot assign to read only property 'Property' of object '[Object]'

Question

So i have this in my reducer:

export interface PersonState {
  person: Person;
}

which has an array of relatives inside and i'm trying to update it with this:

mutableOn(PersonActions.addRelatives, (state, { relatives }) => {
    const person = state.person;
    person.relatives = relatives;
})

but it gave me an error:

Cannot assign to read only property 'Relatives' of object '[object Object]'

I'm very new with NgRx and Immer so i don't know what i'm doing wrong. Any clue?

Answer 1

you are trying to modify the immutable person, which is forbiden. the correct way of updating your person would be

mutableOn(PersonActions.addRelatives, (state, { relatives }) => {
     return {
       ...state,
       person: {
         ...state.person,
         relatives,
       }
     };
})