Updating object in nested array, react-redux

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! :)

How is your payload.goal? do you want update a goal or just adding a goal? — F.bernal
– F.bernal, Commented May 24, 2019 at 12:06
I want to update, but since it is 4 properties within the object, I sent it the whole payload. Should I do it in any other way? — Johan
– Johan, Commented May 24, 2019 at 12:18

F.bernal · Accepted Answer · 2019-05-24 14:06:56Z

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}]));

edited May 24, 2019 at 14:06

answered May 24, 2019 at 12:08

F.bernal

2,7022 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Johan Over a year ago

The code above worked better, though I still have the same problem that the one at index 0, also gets manipulated even though I edit other objects.

F.bernal Over a year ago

Update your post with your last changes, if you are using the reducer I post, it no adds nothing at index 0, so may be the problem is outside the reducer.

Johan Over a year ago

I found the problem, for some reason the calculation of the index always became 0. But since I send in the index with the rest of the properties, I could use that one instead. Thank you, the reducer also solved my problem with infinite nested copies!

Dzianis Bunchanka · Accepted Answer · 2019-05-24 12:22:48Z

0

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

answered May 24, 2019 at 12:22

Dzianis Bunchanka

1511 silver badge6 bronze badges

Collectives™ on Stack Overflow

Updating object in nested array, react-redux

Reducer

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Reducer

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related