Angular 14中使用NGRX实现购物车分组功能遇问题

核心错误原因 #

1. Action payload 类型错误：你把Observable<Photo[]>作为Action的参数传递，但Action的props要求的是包含basket属性的对象，且Reducer是纯函数，不能处理Observable异步流，Action只能传递同步的原始数据。
2. Reducer 滥用RxJS操作符：Reducer必须是纯函数，仅接收当前状态和Action并返回新状态，不能使用pipe/groupBy这类RxJS异步操作。
3. 设计逻辑偏差：购物车分组属于衍生状态计算，应该用NgRx Selector实现，而非通过Action修改原始状态。

正确实现步骤 #

1. 删除错误的groupBasket Action与Reducer逻辑

不需要通过Action触发分组，直接用Selector处理衍生状态，所以删除：

• groupBasket Action定义
• Reducer中on(groupBasket, ...)的处理代码

2. 创建分组用的NgRx Selector

在状态相关文件中添加Selector，负责将原始购物车数据转换为分组结构：

import { createSelector } from '@ngrx/store';

// 基础Selector：获取原始购物车状态
const selectBasketState = (state: { basket: Photo[] }) => state.basket;

// 分组Selector：按id分组，添加数量统计
export const selectGroupedBasket = createSelector(
  selectBasketState,
  (basket: Photo[]) => {
    return basket.reduce((grouped, photo) => {
      const existingItem = grouped.find(item => item.id === photo.id);
      if (existingItem) {
        existingItem.quantity += 1;
        // 如需汇总其他字段（如总价），可在此扩展：
        // existingItem.totalPrice += photo.price;
      } else {
        grouped.push({
          ...photo,
          quantity: 1
          // 初始化汇总字段：
          // totalPrice: photo.price
        });
      }
      return grouped;
    }, [] as (Photo & { quantity: number })[]);
  }
);

3. 在组件中使用分组后的Selector

直接订阅Selector获取分组结果，无需手动dispatch Action：

export class BasketMobileComponent implements OnInit {

  constructor(private basketStore: Store<{ basket: Photo[] }>) { }

  // 直接获取分组后的购物车状态
  groupedBasket$ = this.basketStore.pipe(select(selectGroupedBasket));
  
  ngOnInit(): void {
    // 无需额外操作，Selector会自动监听原始状态变化并重新计算分组
  }
}

为什么这样做更合理 #

• 符合NgRx设计模式：原始状态仅维护最基础的购物车条目，衍生状态（如分组、总价）由Selector计算，避免污染原始状态。
• 自动响应状态变化：当购物车添加/删除商品时，Selector会自动重新计算分组结果，无需手动触发。
• 纯函数保证可预测性：Selector是纯函数，仅依赖输入状态，输出结果稳定可测试。

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