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

【问题标题】：How to update item quantity in the shopping cart using React Redux如何使用 React Redux 更新购物车中的商品数量
【发布时间】：2021-09-28 15:21:52
【问题描述】：

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

这是我的减速器的代码：

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);
        }}
      />

....

【问题讨论】：

您通常将商品数量存储在哪里，或者这是问题所在，您不是？什么是动作有效载荷？你能分享你的动作创建者以及它们是如何使用的吗？

标签： javascript reactjs react-native redux react-redux

【解决方案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 中，您的想法是正确的，首先搜索购物车数组以查看产品是否已经在购物车中。如果商品已经在购物车中，那么您偏离了轨道，那么您想要增加商品数量属性，否则您将整个商品添加到购物车中。

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

【讨论】：