如何正确实现商品收藏功能：支持单个添加与独立删除-js教程-PHP中文网

如何正确实现商品收藏功能：支持单个添加与独立删除

本文详解 redux 状态管理中商品收藏列表的正确实现方式，解决“新增收藏覆盖旧项”和“删除逻辑失效”两大核心问题，确保 favorites 数组独立维护、增删精准对应。

本文详解 redux 状态管理中商品收藏列表的正确实现方式，解决“新增收藏覆盖旧项”和“删除逻辑失效”两大核心问题，确保 favorites 数组独立维护、增删精准对应。

在构建电商类应用时，收藏（Favorites）功能需满足两个基本要求：同一用户可逐个添加多个不同商品至收藏列表，且能对任一已收藏商品执行独立删除操作。然而，原始代码存在三处关键错误，导致功能异常：

状态字段误用：ADD_PRODUCT_TO_FAVORITE 和 DELETE_FAVORITE_PRODUCT 操作错误地修改了 state.products（即全量商品数据源），而非真正应被维护的 state.favorites 收藏列表；
删除逻辑缺陷：DELETE_FAVORITE_PRODUCT 的 reducer 中未从 action.payload 获取 product，且 filter 条件写为 ===（应为 !==），导致无法正确移除目标项；
UI 层参数传递不一致：Clear(item) 传入的是商品对象，但 reducer 未定义接收该对象的 payload 结构，造成逻辑断连。

✅ 正确实现需严格分离关注点：state.products 作为只读商品目录，state.favorites 作为可变收藏集合。

✅ 修正后的 Redux Reducer（关键片段）

const initialState = {
  products: ProductData, // 只读商品源数据
  cart: [],
  favorites: [],         // ✅ 专用收藏状态数组
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_PRODUCT_TO_FAVORITE':
      const product = action.payload;
      // 防重复：仅当未收藏时才添加
      if (!state.favorites.some(item => item.id === product.id)) {
        return {
          ...state,
          favorites: [...state.favorites, product], // 推荐使用展开语法替代 concat
        };
      }
      return state; // 已存在，不变更状态

    case 'DELETE_FAVORITE_PRODUCT':
      const { product } = action.payload; // ✅ 明确解构 payload
      return {
        ...state,
        favorites: state.favorites.filter(item => item.id !== product.id), // ✅ 使用 !== 排除目标
      };

    case 'CLEAR':
      return { ...state, cart: [] };

    default:
      console.warn('Unhandled favorite action:', action.type);
      return state;
  }
};

✅ Favorite 页面组件优化要点

Key 值规范：使用 product.id 而非索引 index 作为 map 的 key，避免列表重排时 UI 错乱；
事件处理清晰命名：unfavorite(product) 比 Clear() 更语义化；
Payload 结构统一：dispatch 时必须以 { type, payload: { product } } 格式传递，与 reducer 解构保持一致。

const Favorite = () => {
  const { favorites } = useCart(); // ✅ 注意：此处应取 favorites，非 products！
  const dispatch = useDispatch();

  const unfavorite = (product) => {
    dispatch({
      type: 'DELETE_FAVORITE_PRODUCT',
      payload: { product }, // ✅ 严格匹配 reducer 中的解构
    });
  };

  return (
    <view style="{{" flex:>
      {favorites.length === 0 ? (
        <view style="{{" padding: alignitems:><text>暂无收藏商品，快去挑选心仪好物吧！</text></view>
      ) : (
        <scrollview>
          {favorites.map((product) => (
            <view key="{product.id}" style="{{" flexdirection: padding: borderbottomwidth:><image source="{product.image}" style="{{" width: height: marginright:></image><view style="{{" flex:><text>{product.name}</text><text style="{{" color:>¥{product.price}</text></view><touchableopacity onpress="{()"> unfavorite(product)}>
                <image source="{icons.loveFilled}" style="{{" width: height: tintcolor:></image></touchableopacity></view>
          ))}
        </scrollview>
      )}
    </view>
  );
};

⚠️ 重要注意事项：