如何将多HTTP请求转换为Ngrx Component Store Effect？

需求：根据持有的ID数量发起可变数量的并行HTTP请求，每个请求携带不同ID，最终合并所有结果为一个总金额，并使用Component Store的Effect来实现。

原代码存在的核心问题 #

• 直接在同步函数里订阅异步HTTP请求，函数会立刻返回初始值0，根本拿不到请求完成后的结果
• 手动累加totalAmount的方式不符合响应式编程逻辑，无法保证结果的正确性

完整的Component Store实现示例 #

首先定义Store的状态结构：

interface BookPriceState {
  totalAmount: number;
  loading: boolean;
  error: string | null;
}

const initialState: BookPriceState = {
  totalAmount: 0,
  loading: false,
  error: null,
};

然后实现Component Store：

import { Injectable } from '@angular/core';
import { ComponentStore, tapResponse } from '@ngrx/component-store';
import { HttpClient } from '@angular/common/http';
import { forkJoin, switchMap, map, catchError, of, tap } from 'rxjs';

@Injectable()
export class BookPriceStore extends ComponentStore<BookPriceState> {
  private readonly apiUrl = 'example.com/prices/books';

  // 初始化Store
  constructor(private readonly http: HttpClient) {
    super(initialState);
  }

  // 定义Effect处理并行请求逻辑
  readonly loadTotalAmount = this.effect((bookIds$: Observable<number[]>) => {
    return bookIds$.pipe(
      // 发起请求前先设置加载状态
      tap(() => this.patchState({ loading: true, error: null })),
      // 切换到新请求流，自动取消未完成的旧请求
      switchMap(ids => {
        // 无ID时直接返回0
        if (ids.length === 0) {
          return of(0);
        }
        // 将ID数组转为对应的HTTP请求Observable数组
        const priceRequests = ids.map(id => 
          this.http.get<number>(`${this.apiUrl}/${id}`)
        );
        // 并行执行所有请求，等待全部完成后返回结果数组
        return forkJoin(priceRequests).pipe(
          // 计算所有价格的总和
          map(prices => prices.reduce((total, price) => total + price, 0)),
          // 统一处理成功/失败的状态更新
          tapResponse(
            total => this.patchState({ totalAmount: total, loading: false }),
            error => this.patchState({ loading: false, error: error.message })
          ),
          // 捕获错误避免流中断
          catchError(() => of(0))
        );
      })
    );
  });
}

关键操作符说明 #

• switchMap：当新的ID数组触发时，自动取消之前未完成的请求，避免无效请求和状态混乱
• forkJoin：并行执行所有HTTP请求，只有当所有请求都成功时才返回结果数组；若任一请求失败，会进入错误流
• map + reduce：把请求返回的价格数组计算为总金额
• tapResponse：Component Store提供的便捷操作符，简化请求成功/失败后的状态更新逻辑
• patchState：更新Store中的状态，包括总金额、加载状态和错误信息

组件中使用方式 #

在组件内触发Effect即可：

// 直接传入ID数组触发
this.bookPriceStore.loadTotalAmount([1,2,3,4]);

// 或者订阅ID的变化自动触发
this.bookIds$.subscribe(ids => this.bookPriceStore.loadTotalAmount(ids));

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