Redux 将项目添加到状态重复条目中的现有对象答案

【问题标题】：Redux add item to an existing object in state duplicates entryRedux 将项目添加到状态重复条目中的现有对象
【发布时间】：2021-02-07 06:06:30
【问题描述】：

我正在使用 redux 和 lodash 将商品添加到购物车。由于某种原因，它重复了该条目。所以我在购物车对象和 cart.items 对象中有相同的项目

我的减速机：

const INITIAL_STATE = {
    items: {},
    count: null
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
    case actionTypes.ADD_CART_ITEM:
        return { ...state, ..._.merge(state.items, { [action.payload.id]: action.payload }) }
    default:
        return state
    }
}

我的行动

export const addCartItem = (item) => {
    return {
        type: actionTypes.ADD_CART_ITEM,
        payload: item
    }
}

我要添加到购物车的功能

addToCart() {
        const { selectedSize, selectedShade, selectedQuantity } = this.props.product
        const { id, sku } = this.props.product.product

        if (selectedSize && selectedShade && selectedQuantity) {
            const item = {
                id: id,
                sku: sku,
                size: selectedSize,
                shade: selectedShade,
                quantity: selectedQuantity
            }
            this.props.addCartItem(item)
        } else {
            console.log('you need to select product attributes')
        }
    }

添加项目后我的 Redux 状态

cart: {
    '1': {
      id: 1,
      sku: '7620896024640',
      size: {
        id: 2,
        name: 'Medium',
        prefix: 'M'
      },
      shade: {
        id: 3,
        name: 'Blue',
        prefix: 'Blue',
        color: 'blue'
      },
      quantity: 3
    },
    '9': {
      id: 9,
      sku: '9125620808537',
      size: {
        id: 2,
        name: 'Medium',
        prefix: 'M'
      },
      shade: {
        id: 1,
        name: 'Red',
        prefix: 'Red',
        color: 'red'
      },
      quantity: 1
    },
    items: {
      '1': {
        id: 1,
        sku: '7620896024640',
        size: {
          id: 2,
          name: 'Medium',
          prefix: 'M'
        },
        shade: {
          id: 3,
          name: 'Blue',
          prefix: 'Blue',
          color: 'blue'
        },
        quantity: 3
      },
      '9': {
        id: 9,
        sku: '9125620808537',
        size: {
          id: 2,
          name: 'Medium',
          prefix: 'M'
        },
        shade: {
          id: 1,
          name: 'Red',
          prefix: 'Red',
          color: 'red'
        },
        quantity: 1
      }
    }
  }

【问题讨论】：

标签： reactjs redux lodash

【解决方案1】：

我认为您在减速器中错误地设置了状态。你可以尝试用这个替换它吗：

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
    case actionTypes.ADD_CART_ITEM:
        return { ...state, items: {...state.items, [action.payload.id]: action.payload }}
    default:
        return state
    }
}

【讨论】：

return { ...state, items: {...state.items, { [action.payload.id]: action.payload }}} 给出语法错误，但 return { ...state, items: [...state.items, { [action.payload.id]: action.payload }]} 有效，但仍然不是我想要的解决方案。它在项目内创建一个数组，然后添加项目。所以它看起来像 firstitem: cart[items][0][1], seconditem cart[items][1][1]
对不起。我认为 [action.payload.id]: action.payload 不应该被包裹在大括号中。我更新了答案。请问你可以试试吗？
一个小警告。 items 被视为一个对象，我无法使用 .map 遍历它。有没有一种简单的方法可以将 cart.items 视为一个数组？
那么items 需要什么结构？它是一个对象数组吗？

【解决方案2】：

您不调用 2 次相同操作的控件（例如在另一个组件中），或者如果您正在使用效果，请查看您正在调用正确的操作

【讨论】：

我不明白？
如果您说您可能会触发其他操作，我不是。只有一个添加到购物车动作火灾。我正在通过 chrome 中的 redux 调试工具进行调试
你在用特效？？
不，我只使用类。 useEffects 在类组件中不起作用
在减速器中你没有调用相同的动作，或者我真的不知道为什么