Как порешать ситуацию с дубликатами?

Question

[HellYeahOmg]

Пишу для практики интернет-магазин (без бекэнда, только стадия добавления корзину). Использую react и redux.
Все загруженные продукты содержаться в store.products.items.
Все добавленные в корзину продукты содержатся в store.cart.items.
Редюсер для корзины:

var initialState = {
  items: [],
  totalPrice: 0
};

const addTotalPrice = (oldPrice, newPrice) => oldPrice + newPrice;
const reduceTotalPrice = (oldPrice, priceToDelete) => oldPrice - priceToDelete;

export const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      return {
        ...state,
        items: [...state.items, action.payload],
        totalPrice: addTotalPrice(state.totalPrice, action.payload.price)
      };
    case "DELETE_FROM_CART":
      return {
        ...state,
        items: state.items.filter(book => book.id !== action.payload.id),
        totalPrice: reduceTotalPrice(state.totalPrice, action.payload.price)
      };
    default:
      return state;
  }
};

Проблема - удаление дубликатов товаров.
На данный момент при удалении одного из таких товаров удаляются все подобные из store, но из ui удаляется только 1 штука, аналогично с ценой (вычитается как будто 1 штука)

Была идея с добавлением свойства, например, count, потом тупо умножать цену на count и получать нормальный результат, но в React компоненты неизменяемы.

Answer 1

[Антон Спирин]

1. Считать totalPrice и хранить в редьюсере - плохое решение. Изменять сумму на основе предыдущего значения - решение еще хуже. Напишите селектор, который будет считать totalPrice на основе cart.items или считайте сумму каждый рендер.
2. Не позволяйте добавлять дубликат товара. Вместо этого увеличивайте количество.

Comments

[HellYeahOmg]

2. Не позволяйте добавлять дубликат товара. Вместо этого увеличивайте количество.

Так вот такая мысль сначала и была, типа считать в count кол-во одинаковых товаров:

Была идея с добавлением свойства, например, count, потом тупо умножать цену на count и получать нормальный результат, но в React компоненты неизменяемы.

Не добавлять же count в json файл?

[Антон Спирин]

HellYeahOmg, не ясно о каком json файле идет речь. Данные о количестве(quantity, а не count) это данные необходимые для совершения покупки в любом онлайн магазине, где можно купить больше одного экземпляра товара за раз.

[HellYeahOmg]

Антон Спирин, В моем случае все товары хранятся в json файле, которые получаю с помощью fetch из папки public (как будто получаю с сервера).
Я понял идею с count/quantity, но реализовать то как лучше всего?) Не копировать же целиком массив чтобы потом добавить всем объектам свойство quantity.

[Антон Спирин]

HellYeahOmg, добавлять в корзину не сущность товара, а создавать cartItem:

function addToCart(product, quantity = 1) {
  const { id, name, sku, slug, img } = product;

  const item = {
    product_id: id,
    slug,
    sku,
    img,
    name,
    quantity,
  };

  return ({
    type: ADD_TO_CART,
    payload: {
      item,
    }, 
  });
}

Ну и эти данные вы по-хорошему должны в localStorage сохранять и при инициализации проверять их наличие. Для автоматизации этого процесса есть библиотеки, например, redux-persist