使用React+Redux Toolkit如何更新商品的计数器与对应价格？

解决方案 #

1. 调整addCounter reducer 逻辑 #

你需要在reducer中先通过唯一标识找到目标商品，再更新其counter属性，Redux Toolkit内置Immer支持直接修改状态：

import { createSlice } from "@reduxjs/toolkit";

export const displayItemsSlice = createSlice({
  name: 'displayItems',
  initialState: {
    itemList: [],
  },
  reducers: {
    addItem: (state, action) => {
      // 可选优化：新增唯一id避免同名商品冲突，不需要可以保留原逻辑
      state.itemList.push({
        id: Date.now().toString(),
        name: action.payload,
        counter: 1,
        price: 1
      });
    },
    addCounter: (state, action) => {
      // payload传入目标商品的唯一标识，这里示例用id，用name的话改为匹配item.name即可
      const target = state.itemList.find(item => item.id === action.payload.itemId)
      if (target) {
        target.counter += 1
        // 如需同步更新price，直接在此处计算即可：target.price = target.counter * 单价
      }
    },
    addPrice: (state, action) => {
      return
    },
  },
})

export const { addItem, addCounter, addPrice} = displayItemsSlice.actions
export default displayItemsSlice.reducer

2. 组件中派发addCounter事件 #

在商品项的加计数器触发逻辑中，传入对应商品的唯一标识即可：

// 示例：商品列表循环渲染时的加按钮点击事件
const handleAddCount = (item) => {
  dispatch(addCounter({ itemId: item.id }))
  // 用name作为标识的话改为 dispatch(addCounter({ itemName: item.name }))
}

注意事项 #

• 如果你的业务中存在同名商品，必须给每个商品加唯一id作为匹配标识，避免更新错商品
• Redux Toolkit 允许直接修改状态属性，不需要手动返回新的状态对象，只要找到目标项直接修改counter即可生效

内容的提问来源于stack exchange，提问作者fmagesty