如何在NgRx Store Effect中返回forkJoin的执行结果？

我来帮你梳理下在NgRx Effect里用forkJoin处理批量请求的正确姿势，结合你的伪代码补全完整的实现逻辑：

首先，先看完整的可运行示例代码，核心逻辑都加了注释：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of, forkJoin } from 'rxjs';
import { switchMap, map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

// 假设你的Action类型和Action类已经定义好
enum ActionTypes {
  SomeActionType = '[Some] Trigger Load',
  LoadSingleSuccess = '[Some] Load Single Success',
  LoadMultipleSuccess = '[Some] Load Multiple Success',
  LoadFailure = '[Some] Load Failure',
  NoResultsAction = '[Some] No Results'
}

class SomeActionType {
  readonly type = ActionTypes.SomeActionType;
  // 可以根据需求添加payload
}

class LoadSingleSuccess {
  readonly type = ActionTypes.LoadSingleSuccess;
  constructor(public payload: any) {}
}

class LoadMultipleSuccess {
  readonly type = ActionTypes.LoadMultipleSuccess;
  constructor(public payload: any[]) {}
}

class LoadFailure {
  readonly type = ActionTypes.LoadFailure;
  constructor(public payload: Error) {}
}

class NoResultsAction {
  readonly type = ActionTypes.NoResultsAction;
}

@Injectable()
export class SomeEffects {
  someEffect$ = createEffect(() =>
    this.actions$.pipe(
      ofType<SomeActionType>(ActionTypes.SomeActionType),
      // 第一个switchMap处理初始请求
      switchMap((action) =>
        this.http.get<any>('some/url').pipe(
          // 嵌套switchMap，把初始请求的结果转换成批量请求
          switchMap((someResult) => {
            const potentialResults = oneOrMany(someResult);
            
            // 单个结果的情况，直接发起单个请求
            if (potentialResults.length === 1) {
              return this.http.get<any>(potentialResults[0]).pipe(
                map(singleRes => new LoadSingleSuccess(singleRes))
              );
            } 
            // 多个结果，用forkJoin并行执行所有请求
            else if (potentialResults.length > 1) {
              // 把每个结果转换成对应的HTTP请求Observable
              const requestObservables = potentialResults.map(item => 
                this.http.get<any>(item)
              );
              
              // forkJoin会等待所有请求完成，返回结果数组
              return forkJoin(requestObservables).pipe(
                map(multiRes => new LoadMultipleSuccess(multiRes)),
                // 捕获批量请求中的错误，转换成失败Action
                catchError(err => of(new LoadFailure(err)))
              );
            } 
            // 没有结果的边界情况，返回一个空结果的Action
            else {
              return of(new NoResultsAction());
            }
          }),
          // 捕获初始请求的错误
          catchError(err => of(new LoadFailure(err)))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private http: HttpClient
  ) {}
}

// 假设这是你的oneOrMany函数，根据返回结果生成需要处理的请求数组
function oneOrMany(someResult: any): any[] {
  // 示例逻辑：如果是数组直接返回，否则包装成数组
  return Array.isArray(someResult) ? someResult : [someResult];
}

关键细节说明： #

• 嵌套switchMap的作用：第一个switchMap处理初始的HTTP请求，拿到结果后，我们需要根据结果生成批量请求，所以用第二个switchMap切换到forkJoin的Observable流，确保Effect始终返回Observable<Action>。
• forkJoin的特性：它会等待所有传入的Observable都完成后，将所有结果按顺序打包成一个数组返回，非常适合并行处理多个独立请求的场景。
• 错误处理的必要性：一定要给forkJoin和外层请求都加上catchError，否则任何一个请求失败都会导致整个Effect崩溃，我们需要把错误转换成失败Action，保证Effect能持续监听后续的Action。
• 边界情况处理：当potentialResults为空时，必须返回一个合法的Action Observable（比如NoResultsAction），不能返回空流，否则NgRx会抛出错误。

额外注意点： #

• 如果你的请求是串行依赖（比如下一个请求需要用上一个请求的结果），那应该用concatMap或者mergeMap，而不是forkJoin。
• 如果你需要每个请求完成就立即处理（不需要等所有请求完成），可以用merge或者concat，但forkJoin更适合需要所有结果再进行下一步的场景。
• 从NgRx 8+开始，推荐使用createEffect函数来创建Effect，而不是之前的装饰器写法，代码更简洁也更易维护。

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