CODEWITHSUNDEEP
reactjsreduxreact-redux
Johan
Johan

Reputation: 35

Updating object in nested array, react-redux

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

Upvotes: 0

Views: 2390

Answers (2)

F.bernal
F.bernal

Reputation: 2694

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

Upvotes: 1

Dzianis Bunchanka
Dzianis Bunchanka

Reputation: 151

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

Upvotes: 0

Related Questions