Redux: Редуктор перезаписывает предыдущее состояние при новом добавлении

Question

Я пытаюсь реализовать простую функциональность корзины покупок, используя Redux и чистый Javascript. Я разделил свои редукторы на две части, одну для пользовательского интерфейса и одну для функциональности корзины.

Моя проблема в том, что при добавлении элемента в корзину он отображается нормально в состоянии, но когда я добавляю другой элемент, он перезаписывает предыдущий элемент в состоянии. Некоторое время я боролся с этим и пробовал несколько решений.

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

Это работает - просто необходимо распространить объект 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 ] }

Answer 2

Разрушение объекта не выполняет глубокое слияние .

В любом случае, у вас есть другие проблемы, потому что вы не используете правильные ключи от государства.

Должно быть вместо:

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