React Redux项目中mapDispatchToProps绑定的addToWishList功能失效问题

问题根源及修复方案 #

1. Home组件未正确注入addToWishList props #

你在定义Home组件时，只从props中解构了addToCart，没有引入addToWishList，导致组件内部调用的addToWishList实际是未定义变量，自然无法触发redux流程。
修正后的组件声明：

function Home({ addToCart, addToWishList }) {
  // 原有逻辑保持不变
}

2. 心愿单reducer逻辑存在多处错误 #

shopping-reducer.js中WISH_LIST分支有3处逻辑错误：

• 判断商品是否已存在时，错误遍历了购物车数组state.cart，应该遍历心愿单数组state.wishList
• 商品已存在时错误将wishList设为null，应该保留原有数组不变
• 新增商品时额外套了一层itemForWish对象，导致存储结构和预期不符
  修正后的WISH_LIST分支代码：

case actionTypes.WISH_LIST:
  const itemForWish = action.payload.item;
  // 从wishList数组判断是否已存在
  const isInWish = state.wishList.find((item) =>
    item.id === itemForWish.id ? true : false
  );
  return {
    ...state,
    // 已存在则保留原数组，不存在则直接加入商品对象，不额外套层
    wishList: isInWish ? [...state.wishList] : [...state.wishList, itemForWish],
  };

可选优化：其他reducer分支潜在问题 #

现有代码中另外两个reducer分支存在隐性bug，可提前修复避免后续踩坑：

• REMOVE_FROM_CART分支：你传的payload是id: itemId，但取值时用了action.payload.item.id会报错，应该改为action.payload.id
• ADJUST_QTY分支同理，应该取action.payload.id而不是action.payload.item.id

内容的提问来源于stack exchange，提问作者snir.hak