在 React Native 中使用 @reduxjs/toolkit 更新购物车商品数量和价格

Question

我有一个购物车状态，其中包含类似这样的数组：

 [[{"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>

所以，一旦按下添加数量的按钮，我想用新的数量和新的总价更新购物车状态，当减少数量时也一样，这听起来是一个非常简单的问题，但我是初学者，我想不通出来了。

Answer 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>

在 React Native 中使用 @reduxjs/toolkit 更新购物车商品数量和价格

Update cart items quantity and price with @reduxjs/toolkit in react native

reactjs

react-native

redux

react-redux

redux-toolkit