在 react native 中使用 @reduxjs/toolkit 更新购物车商品的数量和价格答案

【问题标题】：Update cart items quantity and price with @reduxjs/toolkit in react native在 react native 中使用 @reduxjs/toolkit 更新购物车商品的数量和价格
【发布时间】：2021-07-18 18:34:02
【问题描述】：

我有一个购物车状态，它持有这样的数组：

 [[{"Id": 123, "duration": 10, "name": "Burger", "price": 10, "qty": 1, "total": "10.00"}]]

这是减速器，显示我添加了更多以增加和减少数量：

const cartSlice = createSlice({
    name: "cart",
    initialState: [],
    reducers: {
        addItemToCart: (state, action) => {
            state.push(action.payload); 
        },
        removeItemFromCart: (state, action) => {
            return state.filter(i => i[0].Id !== action.payload);
        },
        ADD_QUANTITY: (state, action) => {

           // notsure how to handle here 

        },
        SUB_QUANTITY: (state, action) => {
         // notsure how to handle here 
        }
    }
})

在购物车屏幕中我正在做这样的事情：

  <TouchableOpacity onPress={() => dispatch(ADD_QUANTITY(item[0].Id))} >
      <Ionicons name="add-circle-outline" size={22} color="#cccccc" />
   </TouchableOpacity>

所以，一旦按下添加数量的按钮，我想用新的数量和新的总价更新购物车状态，减少数量时也一样，这听起来很简单，但我是初学者，我无法弄清楚.

【问题讨论】：

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

【解决方案1】：

根据您提供的输入数组，您可以像这样实现数组中数量的加法和减法。您必须使用 forEach 循环状态，然后检查 Id 是否与您在操作有效负载中传递的 Id 匹配，如果它是递增或递减值。

编辑：

回想起来，我意识到这是错误的，也不适用于实际数据。我建议在循环嵌套数组之前将其展平。

const cartSlice = createSlice({
  name: "cart",
  initialState: [],
  reducers: {
    addItemToCart: (state, action) => {
      state.push(action.payload);
    },
    removeItemFromCart: (state, action) => {
      state.flat().filter((i) => i.Id !== action.payload);
    },
    addQuantityToItem: (state, action) => {
      state.flat().forEach((item) => {
        if (item.Id === action.payload) {
          item.qty += 1;
        }
      });
    },
    subtractQuantityFromItem: (state, action) => {
      state.flat().forEach((item) => {
        if (item.Id === action.payload) {
          item.qty -= 1;
        }
      });
    },
  },
});

您必须传入 id 值的示例用例：

<TouchableOpacity onPress={() => dispatch(addQuantityToItem(id))} >
    <Ionicons name="add-circle-outline" size={22} color="#cccccc" />
</TouchableOpacity>

【讨论】：