updating multiple items in redux array

Question

I am trying to update an array of objects in the redux state,

cars redux state

cars:  [
  {
    _id:"5b61b782719613486cdda7ec",
    car: "BMW",
    year: '2015'
   },
   {
      _id:"5b61b782719613486cdda7e1",
      car: "Toyota",
      year: '2015'
    },
    {
      _id:"5b61b782719613486cdda7e2",
      car: "Honda",
      year: '2015'
    },
    {
      _id:"5b61b782719613486cdda7e3",
      car: "Audi",
      year: '2015'
    }
 ]

action.payload array

 action.payload :      
   [
    {
      _id:"5b61b782719613486cdda7ec",
      car: "BMW",
      year: '2019'
    },
    {
      _id:"5b61b782719613486cdda7e3",
      car: "Audi",
      year: '2019'
    }
  ]


case UPDATE_CARS:
  const updatedCars = state.cars.map((car) => {
  action.payload.forEach((newCars, index) => {
    if (car._id !== newCars._id) {
      //This is not the item we care about, keep it as is
      return car;
    } else {
      //Otherwise, this is the one we want to return an updated value
      return { ...car, ...newCars };
    }
  });
});

return {
  ...state,
  cars: updatedCars,
  loading: false
};

As you can see I am trying to update multiple items in the redux array only if item exists in the redux state.

What am I doing wrong? Any suggestions?

devserkan · Accepted Answer · 2018-08-21 17:40:18Z

7

Another alternative:

const updatedCars = state.cars.map( car => {
  const found = action.payload.find( el => el._id === car._id );
  return found ? found : car;
});

forEach does not return anything, it just executes the given function for the current element. So, for the situations like that map is your friend.

Even there is a shorter and nicer version which @Luke M Willis provided in the comments:

const updatedCars =
    state.cars.map(car => action.payload.find(el => el._id === car._id) || car);

edited Aug 21, 2018 at 17:40

answered Aug 21, 2018 at 15:52

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

3 Comments

Arup Rakshit Over a year ago

@publicArt33 So you wanted the return value to be an array. not as object which I gave.. got it.

Luke Willis Over a year ago

You can shorten this to state.cars.map(car => action.payload.find(el => el._id === car._id) || car)

devserkan Over a year ago

Thank you @LukeMWillis, this is a really nice logic. I should remember this as a learner. Also, I've updated my answer and added your solution.

Arup Rakshit · Accepted Answer · 2018-08-21 16:24:19Z

0

I'll filter out the cars from state, which are present in action.payload. Then I'll merge the action.payload, and filtered state like below.

case UPDATE_CARS:
  const updatedCarIds = action.payload.map(o => o.id);
  const notUpdatedCars = state.cars.filters(car => !updatedCarIds.includes(car.id))
  return [...notUpdatedCars, ...action.payload]

edited Aug 21, 2018 at 16:24

answered Aug 21, 2018 at 15:44

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

2 Comments

publicArt33 Over a year ago

Thanks @Arup ! Btw, there is a small inaccuracy in your code const notUpdatedCars = state.cars.filter(car => !updatedCardIds.CarIds.includes(car.id))

Arup Rakshit Over a year ago

@publicArt33 What is that?

Collectives™ on Stack Overflow

updating multiple items in redux array

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related