CODEWITHSUNDEEP
javascriptreactjs
Richardson
Richardson

Reputation: 2284

Updating State Context API, how to stop state from overwriting the current value in the reducer function?

I have this reducer case, problem is it overwrite the the passed id instead of adding to the existing array of id. could you please explain that general idea behind copying the sate and where should I use the (...state) spread operator behind the item it self or after the item when the change is happening, to me this is the hardest part to grasp when it comes to state management ?

   case ADD_ITEM:
      return   {
        ...state, 
          item : {
          ...state.item,
          [action.infoId]: [{ id : action.id}]
          }
        };

Upvotes: 0

Views: 144

Answers (1)

Ryan Le
Ryan Le

Reputation: 8412

You will need to spread your item[action.infoID] too:

Change to:

case ADD_ITEM:
  return   {
    ...state, 
      item : {
      ...state.item,
      [action.infoId]: [...state.item[action.infoId], action.id]
      }
    };

The spread operator is basically spreading every item from your object/array

From mozilla deffinition

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

Upvotes: 2

Related Questions