Updating object in nested array, react-redux - reactjs

Question

I'm trying to update the objects that is in the nested array, below is an example of my state. I am trying to update the objects within goals I succeed with updating the objects.
BUT
Each time I update any object. the object at index 0, will get a copy of all the objects. And the more times I update, it creates more copies and they become nested within the object at index 0.
The object at index 0 will also be updated with the most recent update of any object.
{
list: {
'0': {
id: 0,
dueDate: 'By May 28th I Will have: ',
goals: [
{
0: {...}
1: {...}
3: {...}
}
]
}
'1':{
id: 0,
dueDate: 'By June 31st I Will have: ',
goals: [
{
2: {...}
4: {...}
}
}
keyName = index of object in list. ( the two ones above '0' and '1' : {
)
Reducer
return {
...state,
[action.payload.keyName]: {
...state[action.payload.keyName],
goals: [
{ ...state[action.payload.keyName].goals, ...action.payload.goal },
...state[action.payload.keyName].goals.slice(1, state[action.payload.keyName].goals.length)
]
}
};
Also if you know any good documentation or tutorial on normalizr please let me know.
Thank you in advance! :)

Answer 1

This will update a goal based in its keys, assuming a goal has unique keys.
const state = {
'0': {
id: 0,
dueDate: 'By May 28th I Will have: ',
goals: [
{a: 1,
b: 1,
c: 1}
]
},
'1':{
id: 0,
dueDate: 'By June 31st I Will have: ',
goals: [
{d: 1,
r: 1}
]
}
};
function reducer(state, keyName = 0, goal) {
const goals = [...state[keyName].goals];
const index = state[keyName].goals.findIndex((e) => Object.keys(e).every((key) => Object.keys(goal).includes(key)));
goals.splice(index,1, goal);
return {
...state,
[keyName]: {
...state[keyName],
goals,
}
};
}
console.log(reducer(state, 0, {a:3, b:2, c:4}));
This is assuming that you are updating your goals by array positioning.
const state = {
'0': {
id: 0,
dueDate: 'By May 28th I Will have: ',
goals: [
{test: 1},
{test: 1},
{test: 1}
]
},
'1':{
id: 0,
dueDate: 'By June 31st I Will have: ',
goals: [
{test: 1},
{test: 1}
]
}
};
function reducer(state, keyName = 0, goal) {
return {
...state,
[keyName]: {
...state[keyName],
goals: [{...state[keyName].goals, ...goal}]
}
};
}
console.log(reducer(state, 0, [{test:3}, {test:44}]));

Answer 2

Johan looks like you desctucture your state in a wrong way.
First, try to update your goals using array desctucturing goals: [{...state[keyName].goals, ...newGoal}]
And also maybe this one might come useful https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#updating-nested-objects