Question

我正在尝试使用Redux和纯Javascript实现简单的购物车功能。我将减速器分为两部分，一个用于UI，另一个用于购物车功能。

我的问题是，将商品添加到购物车时，状态显示良好，但是当我添加其他商品时，它会覆盖状态中的前一个商品。我为此苦了一段时间，并尝试了多种解决方案。

const initialState = {
  visibilityFilter: VisibilityFilters.SHOW_ALL,
  shop: {
    purchasedItems: [],
    shopItems: [...shop.items]
  }
}

function shopReducer(state = initialState, action) {

  switch (action.type) {
      case BUY_ITEM:
      const clickedItem = state.shopItems.filter( item => item.id == action.id);
      return {...state, purchasedItems: [...state.purchasedItems, clickedItem ] }

function buyItemShop(id) {
  return {
    type: BUY_ITEM,
    id
  }
}

Answer 1

对象解构不执行深度合并。

无论如何，您还有其他问题，因为您没有使用状态中的正确密钥。

应改为：

  return {
    ...state,
    shop: {
      purchasedItems: [...state.shop.purchasedItems, clickedItem],
      shopItems: state.shop.shopItems,
    },
  }

Answer 2

这有效-只需要将clickedItem对象分布在return语句中即可。

function shopReducer(state = initialState.shop, action) {

  switch (action.type) {
    case BUY_ITEM:
      let clickedItem = state.shopItems.filter( item => item.id == action.id);
      return {...state, cartItems: [...state.cartItems, ...clickedItem ] }

Redux：Reducer覆盖新添加的先前状态

2 个答案: