时间戳

首页 > 解决方案 > Redux：Reducer 在新添加时覆盖以前的状态

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

标签： javascriptredux

解决方案

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

无论如何，您还有其他一些问题，因为您没有使用该州的正确密钥。

应该改为：

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

推荐阅读