Как удалить повторяющиеся товары в корзине, но увеличить их кол-во на React-Redux?

Question

[qfrontend]

Приветствую) Сделала корзину на сайте на React-Redux.
По клику вызывается action параметром которого является объект добавляемого товара.
Далее объект товара пушится в массив. Потом этот массив записывается в localStorage.
Как организовать удаление повторяющихся товаров и увеличить просто их количество?
Спасибо)

export const ADD_PRODUCT = "ADD_PRODUCT";
let basket = [];
let sum = 0;

const addProduct = product => {
  // Если localStorage не пустой, то взять значения из него
  if (localStorage.getItem("basket") !== null) {
    basket = JSON.parse(localStorage.basket);
    sum = JSON.parse(localStorage.sum);
    sum.toFixed(1);
  }
  // Если action передан параметр-(добавляемый товар), то добавить его
  if (product) {
    basket.push(product);
    sum += product.price;
  }
  // Переписать localStorage
  localStorage.setItem("basket", JSON.stringify(basket));
  localStorage.setItem("sum", JSON.stringify(sum));
  return dispatch => {
    dispatch({
      type: ADD_PRODUCT,
      payload: {
        basket: basket,
        sum: sum
      }
    });
  };
};

export default addProduct;

Answer 1

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

1. Зачем каждое добавление проверять существование корзины в localStorage? Добавьте экшен initBasket и вызывайте его один раз во время инициализации приложения:

let cart = [];
// сумму тут хранить не надо

const initCart = () => {/* ... */};
const addProduct = (product, quantity)  => {/* ... */};
const deleteProduct = id => {/* ... */};
const changeQuantity = (id, quantity) => {/* ... */};

2. Сумму надо пересчитывать после каждой операции заново. Никаких вычислений на основе предыдущих результатов.

3. Обновление количества:

const addProduct = (product, quantity) => {
  const index = cart.indexOf(item => item.product.id = product.id);

  if (index !== -1) {
    cart = cart.map((item, i) =>
      i === index ? { ...item, quantity: item.quantity + quantity } : item);
  } else {
    cart = [ ...cart, { product, quantity} ];
  }
  
  const sum = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);

  localStorage.setItem('cart', JSON.stringify(cart));
  localStorage.setItem('sum', JSON.stringify(sum));

  return dispatch => {
    dispatch({
      type: ADD_PRODUCT,
      payload: {
        cart,
        sum,
      },
    });
  };
}

Заметьте обновление иммутабельное. Если вы уверены, что вам тут не нужна иммутабельность, то замените обноление на:

if (index !== -1) {
  cart[index].quantity += quantity;
} else {
  cart.push({ product, quantity });
}

Cтруктура cartItem:

{
  product,
  quantity,
}

Comments

[qfrontend]

Спасибо за ответ :) Если localStorage при инициализации приложения был не пустой(там были добавленные ранее товары), как в таком случае проверять добавляемый товар на повтор?

Answer 2

[Robur]

записывайте не просто продукт а продукт + количество

basket.push({product, count: 1})

и потом, перед тем как пушить, проверяйте, если там уже такой же продукт, если есть то вместо .push
пишите увеличивайте count.

const productInBucket = bucket.find(item => /* проверить что item.product == product так как вам нужно*/)
if (productInBucket) productInBucket.count++
else basket.push({product, count: 1})

Comments

[Владимир Т.]

что если вместо поиска хранить корзину в нормализованном виде

{
    "productId": { ... }
}

и, при добавлении в корзину, проверять
if (productId in basket) basket.productId.count++