Javascript Redux:Reducer在新添加时覆盖以前的状态

我正在尝试使用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
  }
}

对象分解不会执行深度合并

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

应改为：

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

---

这很有效-只需在return语句中传播clickedItem对象

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 ] }

---

由于我的shopReducer只处理初始状态的shop部分，因此将在与PurchasedItems和shopItems相同的级别上设置一个新的shop密钥。此reducers范围中的状态仅为PurchasedItems和shopItems，因此一个浅显的值就足够了，正如我所说的，第一个加法在PurchasedItems数组中显示得很好，问题是第二个加法覆盖了第一个加法。我不理解您的意思，从reducer中tbh.console.logstate{purchasedItems:Array0，shopItems:Array4}purchasedItems:[]shopItems:4[{…}，{…}，{…}，{…}，{…}，{…}]始终记住不可变这个词。