Updating object that contains a list doesn't save changes into the store

I'm facing an issue updating an object within the store.

The deathChange object contains an internal array of nested objects.

Despite using immer and spreading the values with ...spread, changes to the array are not being saved. The problem might be related to how I'm updating the array or the nested structure of the object. I'd appreciate any help finding a solution.

export class MyState {
[immerable] = true;
deathChange!: DeathChange;.....
}


this is the functions:

deleteHerisLeftHisSHareEstate2(herisId: string) {
this.updateState((state) => {
const index = this.getHerisLeftIndex(herisId);
if (index !== -1 && state.deathChange?.heirsLeftList) {
// Create a new array excluding the item at the found index
state.deathChange = {
...state.deathChange,
heirsLeftList: {
...[...state.deathChange.heirsLeftList.splice(index, 1)],
},
};
}
console.log('After update:', state.deathChange?.heirsLeftList);
});


}

or

deleteHerisLeftHisSHareEstate(herisId: string) {
this.updateState((state) => {
const clonedState = cloneDeep(state);
const index = this.getHerisLeftIndex(herisId);
if (index !== -1) {
clonedState.deathChange?.heirsLeftList?.splice(index, 1);
}
return clonedState;
});


}

both not saved me the updated liste in the store!

I'm facing an issue with updating a deeply nested array in my store. The deathChange object contains an array of nested objects, and despite trying different approaches, the updates aren't being saved. I've tried using immer with proper immutability techniques and even attempted cloneDeep from Lodash, but neither approach seems to work. Any suggestions on how to resolve this and ensure the updates persist?

Continue reading...