如何使用React Redux更新购物车中的商品数量

Question

当我添加来自同一产品的新商品时，如何使我的购物车更好地工作？用户可以增加产品的数量，而不是将其添加到购物车中。

这是我的减速器的代码：

import {ADD_TO_CART, REMOVE_FROM_CART, CLEAR_CART} from '../constants';
const initialState = {
cartItems: [],
totalPrice: 0,
};
const cartItems = (state = initialState, action: any) => {
switch (action.type) {
case ADD_TO_CART:
return {
...state,
cartItems: [...state.cartItems, action.payload],
totalPrice: state.totalPrice + action.payload.price,
};
case REMOVE_FROM_CART:
return {
...state,
cartItems: state.cartItems.filter(
cartItem => cartItem !== action.payload,
),
totalPrice: state.totalPrice - action.payload.price,
};
case CLEAR_CART:
return {...initialState};
}
return state;
};
export default cartItems;

我试着这样做，但失败了

import {ADD_TO_CART, REMOVE_FROM_CART, CLEAR_CART} from '../constants';
const initialState = {
cartItems: [],
totalPrice: 0,
};
const cartItems = (state = initialState, action: any) => {
switch (action.type) {
case ADD_TO_CART:
const theItem = state.cartItems.find(
product => product.name === action.payload.name,
);
if (theItem) {
return {
...state,
cartItems: [...state.cartItems, action.payload],
totalPrice: state.totalPrice + action.payload.price,
qty: theItem.qty + 1,
};
}
return {
...state,
cartItems: [...state.cartItems, action.payload],
totalPrice: state.totalPrice + action.payload.price,
};
case REMOVE_FROM_CART:
return {
...state,
cartItems: state.cartItems.filter(
cartItem => cartItem !== action.payload,
),
totalPrice: state.totalPrice - action.payload.price,
};
case CLEAR_CART:
return {...initialState};
}
return state;
};
export default cartItems;

我认为没有必要分享行动，因为购物车工作100%好，但我会分享它，

import {ADD_TO_CART, REMOVE_FROM_CART, CLEAR_CART} from '../constants';
export const addToCart = (payload: any) => {
return {
type: ADD_TO_CART,
payload,
};
};
export const removeFromCart = (payload: any) => {
return {
type: REMOVE_FROM_CART,
payload,
};
};
export const clearCart = () => {
return {
type: CLEAR_CART,
};
};

最后是带有有效载荷的屏幕

const product = {
id: 1,
name: 'LAptop',
price: 1000,
qty: 0,
// imgURL:
//   'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png',
};
....
<Button
title="Add 1"
onPress={() => {
dispatch(addToCart(product));
console.log(cartData);
}}
/>
....

Answer 1

首先，我建议在向购物车添加商品时从数量1开始。

const product = {
id: 1,
name: 'Laptop',
price: 1000,
qty: 1,
imgURL: ...,
...
};
...
<Button
title="Add 1"
onPress={() => {
dispatch(addToCart(product));
console.log(cartData);
}}
/>

在reducer中，您的想法是正确的，首先搜索cart数组，看看产品是否已经在cart中。偏离轨道的地方是，如果商品已经在购物车中，那么您希望增加商品数量属性，否则您将整个商品添加到购物车中。

case ADD_TO_CART:
const { payload } = aciton;
const item = state.cartItems.find(
product => product.id === payload.id,
);
if (item) {
return {
...state,
cartItems: state.cartItems.map(item => item.id === payload.id
? {
...item,
qty: item.qty + 1,
}
: item
),
totalPrice: state.totalPrice + payload.price,
};
}
return {
...state,
cartItems: [...state.cartItems, payload],
totalPrice: state.totalPrice + payload.price,
};

类似地，对于REMOVE_FROM_CART，您首先检查数量是否会变为0，如果是，则从购物车数组中筛选项目，否则映射购物车并递减数量属性。如果你需要看一个例子，我可以更新我的答案，包括它。