如何在NgRx Effect中处理异步操作？解决结果为空问题

你的核心问题是没有把Promise异步操作正确融入RxJS的数据流中，导致Action在Promise完成前就被返回了。以下是具体的修复方案：

错误原因分析 #

1. 原代码中直接将Promise赋值给变量后立即返回Action，此时Promise还未resolve，变量存储的是Promise对象而非实际数据
2. 使用Promise.all时，你试图在Promise的回调中返回Action，但这个回调不属于RxJS管道的数据流，无法被Effect正确捕获

修复方案 #

利用RxJS的from操作符将Promise转换为Observable，再通过mergeMap（或switchMap）将异步操作接入Effect的数据流：

完整修复代码 #

import { from } from 'rxjs';
import { mergeMap, map, catchError } from 'rxjs/operators';

// ...

importItems$ = createEffect(() => this.actions$.pipe(
  ofType(ItemActions.loadItems),
  mergeMap(() => this.itemService.getItems().pipe(
    mergeMap((_) => {
      const helper = new Helper();
      // 定义两个异步Promise（注意修正拼写错误：Inalid → Invalid）
      const validItemsPromise = helper.loadValidItems();
      const invalidItemsPromise = helper.loadInvalidItems();

      // 将Promise.all转换为Observable，融入RxJS数据流
      return from(Promise.all([validItemsPromise, invalidItemsPromise])).pipe(
        // 解构Promise.all返回的结果数组，生成成功Action
        map(([validItems, invalidItems]) => 
          ItemActions.loadItemsSuccess({ validItems, invalidItems })
        ),
        // 可选：添加错误处理，返回失败Action
        catchError((error) => 
          of(ItemActions.loadItemsFailure({ error: error.message }))
        )
      );
    })
  ))
));

关键说明 #

• from(Promise.all(...))：将Promise异步操作转换为RxJS Observable，让异步逻辑能被Effect的管道正确处理
• mergeMap：用于在当前Observable流中切换到新的异步流（Promise转的Observable），等待异步操作完成后再发射结果
• 解构赋值：Promise.all会按传入顺序返回结果数组，通过[validItems, invalidItems]解构即可拿到最终数据

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