Redux-persist - не постоянное количество, но все еще сохраняется общая сумма корзины?

Я пытаюсь сохранить состояние корзины покупок (товары, количество каждого указанного товара, промежуточный и общий итог). Я использую для этого redux-persist.

Моя проблема в том, что когда я изменяю количество товаров в корзине (например, с 1 на количество из 5), а затем обновляю страницу, количество возвращается к 1. Промежуточный итог и итоговая сумма по-прежнему отражают цену x 5. указанного элемента. Количество нельзя изменить после обновления, и если я буду продолжать попытки увеличить количество, промежуточный итог и итоговая сумма корзины все равно увеличиваются.

Количество также не меняется в Chrome DevTools (на вкладке «Приложение», «Хранилище»> «Локальное хранилище»), поэтому я не думаю, что это проблема отображения.

Я пробовал _2 _ / _ 3_ определенные состояния в моем configureStore.js файле. Я не думаю, что это проблема с пакетом redux-persist - я считаю, что проблема в том, как я его реализую или как устроен мой магазин.

Как я могу сохранить товары, количество каждого товара и промежуточную / общую сумму для моей корзины покупок? Что еще более важно, меня беспокоит синхронизация количества товаров, промежуточных и общих итогов корзины.

Я загрузил свой код в codeandbox, чтобы вы могли видеть все и как все это взаимодействует.


reactjs javascript react-redux redux-persist
person Jenna    schedule 12.09.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема не в redux-persist, а в том, что в вашем ADD_QUANTITY редукторе есть ошибка.

Сейчас это выглядит так:

if (action.type === ADD_QUANTITY) {
        let addedItem = state.items.find(item => item.id === action.id);
        addedItem.quantity += 1;
        let newSubTotal = state.subTotal + addedItem.price;
        return {
            ...state,
            subTotal: newSubTotal,
            cartTotal: newSubTotal + shippingCost
        }

    }

Таким образом, это действие находит элемент из списка всех доступных элементов, затем увеличивает его количество (путем изменения исходного объекта, что не является лучшей практикой, но не проблема здесь) и вычисляет новый промежуточный итог. Затем он ничего не делает с обновленным элементом.

Поскольку вы уже добавили свой элемент в массив addedItems в своем состоянии, вам необходимо найти его там и обновить его копию этой версии, а затем вернуть этот обновленный список как новый массив addedItems:

if (action.type === ADD_QUANTITY) {
    const addedItem = state.addedItems.find(item => item.id === action.id);
    let newSubTotal = state.subTotal + addedItem.price;
    const updatedItems = state.addedItems.map(item =>
      item.id === action.id ? { ...item, quantity: item.quantity + 1 } : item
    );
    return {
      ...state,
      addedItems: updatedItems,
      subTotal: newSubTotal,
      cartTotal: newSubTotal + shippingCost
    };
  }
person Will Jenkins    schedule 12.09.2019
comment
Я реализовал ваше решение и сделал нечто подобное для действия MINUS_QUANTITY. Теперь вроде работает как надо. Спасибо за руководство! - person Jenna; 13.09.2019