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

Question

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

这是我的减速器的代码：

从'../constants'导入{ADD_TO_CART，REMOVE_FROM_CART，CLEAR_CART}；

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，如果是，则从购物车数组中过滤项目，否则映射购物车并减少数量属性。 如果您需要查看示例，我可以更新我的答案以包含它。