Redux-persist 不是持久化数量，而是持久化购物车总数？

Question

我正在尝试保留购物车的状态（商品、每个所述商品的数量、小计和总计）。为此，我正在使用 redux-persist。

我的问题是，当我更改购物车中的商品数量（例如，从 1 到 5），然后刷新页面时，数量会变回 1。小计和总计仍然反映所述商品的价格 x 5。刷新后数量无法更改，如果我一直尝试增加数量，购物车小计和总数仍然增加。

数量在 Chrome DevTools 中也没有变化（在“应用程序”、“存储”>“本地存储”选项卡下），所以我认为这不是显示问题。

我在 configureStore.js 文件中尝试了 whitelisting/blacklisting 某些状态。我不认为 redux-persist 包有问题——我认为这是我实施它的方式或我的商店设置方式的问题。

如何让我的购物车中的商品、每件商品的数量和 subtotal/total 保持不变？更重要的是，我关心商品的数量和购物车小计和总计是否保持同步。

我已将我的代码上传到 codesandbox，因此您可以看到所有内容以及它们如何交互。

Answer 1

问题不在于 redux-persist，而是您的 ADD_QUANTITY reducer 中存在错误。

目前看起来是这样的：

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 数组中，您需要在那里找到它并更新它的 that 版本的副本，然后 return 这个更新的列表作为你的新 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
    };
  }

Redux-persist 不是持久化数量，而是持久化购物车总数？

Redux-persist not persisting quantity, but still persisting cart total?

javascript

reactjs

react-redux

redux-persist