我试图保持购物车的状态（物品、每个所述物品的数量、小计和总计）。我正在redux-persist为此使用。
我的问题是，当我更改购物车中的商品数量（例如，从 1 件更改为 5 件数量），然后刷新页面时，数量将回落至 1。小计和总计仍反映价格 x 5所述项目。刷新后数量无法更改，如果我继续尝试增加数量，购物车小计和总计仍会增加。
Chrome DevTools 中的数量也没有变化（在应用程序、存储 > 本地存储选项卡下），所以我认为这不是显示问题。
我在我的文件中尝试过whitelisting/blacklisting某些状态configureStore.js。我不认为这是redux-persist包的问题——我相信这是我如何实施它或我的商店如何设置的问题。
如何为我的购物车保留商品、每件商品的数量和小计/总计？更重要的是，我担心商品数量和购物车小计和总计保持同步。
我已将我的代码上传到codeandbox，因此您可以查看所有内容以及它们如何交互。
问题不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
};
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句