React+Redux电商项目：删除单个购物车商品却清空全部的问题求助

核心问题定位 #

问题出在cartReducer的DELETE_PRODUCT分支返回值结构错误。你的初始cart状态是一个包含products数组的对象：

initialState: {
    cart: {
      products: [],
    },
}

但在删除逻辑中，你直接返回了过滤后的products数组，破坏了原有的状态结构：

case DELETE_PRODUCT: {
  return statePart.products.filter(product => product.id !== action.payload)
}

这会导致cart从{products: [...]}变成纯数组，后续通过getAll等选择器获取cart.products时，会得到undefined，看起来就像购物车被清空了。

修复方案 #

修改DELETE_PRODUCT分支的返回值，保持状态结构一致：

case DELETE_PRODUCT: {
  return {
    ...statePart,
    products: statePart.products.filter(product => product.id !== action.payload)
  }
}

这样既复制了原状态对象，又替换了过滤后的products数组，状态结构不会被破坏，删除单个商品的逻辑就能正常工作。

额外验证点 #

• 你组件中productId的打印可以确认传递的ID是正确的，无需修改这部分逻辑
• ADD_PRODUCT分支的状态更新是正确的，保持了对象结构，这部分可以保留

内容的提问来源于stack exchange，提问作者MarcinB