Question

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

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

Chrome DevTools中的数量也没有变化（在“应用程序”，“存储”>“本地存储”标签下），因此我认为这不是显示问题。

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

如何为我的购物车保留项目，每个项目的数量以及小计/总计？更重要的是，我担心商品的数量以及购物车的小计与总数保持同步。

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

Answer 1

问题不是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
    };
  }

Redux-persist是否不保留数量，但仍然保留购物车总数？

1 个答案: