После удаления элемента из массива он удаляет все дублирующиеся записи - Redux - PullRequest
0 голосов
/ 08 марта 2020

Я делаю приложение для корзины покупок с реактивом-редуксом и столкнулся с проблемой. У каждого элемента в моем списке есть идентификатор, но когда я добавляю 2 элемента с одинаковым идентификатором, а затем внезапно удаляю их из корзины, все элементы с одинаковым идентификатором (или дубликаты удаляются. Код ниже.

Редуктор. js

   const reducer = (state = { items: [] }, { type, payload }) => {
  console.log(payload);
  switch (type) {
    case "ADD_ITEM":
      return {
        ...state,
        items: [...state.items, payload]
      };
    case "REMOVE_ITEM":
      const index = payload.index;
      return {
        ...state,
        items: state.items.filter(({ id }) => id !== payload.id)
      };

    case "DUPLICATE_ITEM":
      return {
        ...state
      };
    default:
      return state;
  }
};

Действие. js

const addItem = item => ({
  type: "ADD_ITEM",
  payload: item
});

const removeItem = (item) => ({
  type: "REMOVE_ITEM",
  payload: item
});

const duplicateItem = () => ({
  type: "DUPLICATE_ITEM"
});

export { addItem, removeItem, duplicateItem };

Item. js

const items = [
  {
    id: 1,
    name: "projectile",
    price: "150$",
    units: 0
  },
  {
    id: 2,
    name: "cute cat",
    price: "1250$",
    units: 0
  }]

1 Ответ

1 голос
/ 08 марта 2020

Похоже, проблема в большей степени связана с дизайном, т. Е. Вместо добавления в корзину N этого же предмета, вы, вероятно, хотите увеличить единицы / кол-во товара, если он уже существует? Затем, когда вы удаляете, уменьшите единицы / кол-во, пока оно не уменьшится до 1, а затем удалите.

Если вы хотите, чтобы поведение работало как есть, вам нужно будет изменить способ удаления из корзины, например

  • удалить по индексу, а не по идентификатору
  • создать суррогатные идентификаторы для товаров при их добавлении в корзину, а затем удалить с помощью этого
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...