能否在NgRx Effect中转换数据？若可行该如何实现？

结论 #

完全可以在NgRx Effect中完成这类异步数据转换操作，这本身就是NgRx Effect的核心设计用途：负责处理action触发后的副作用逻辑（包括HTTP请求、异步数据加工），处理完成后再派发新的action将最终数据传递给reducer更新状态。

实现方案 #

你当前的代码只用到了同步的map操作符，要接入异步HTTP请求，需要改用RxJS的高阶映射操作符（concatMap/switchMap/mergeMap）搭配批量请求处理逻辑，修改后的代码如下：

// app.effect.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { addCityToIndex, returnCityToIndex, updateCityFail } from './reducers/form.reducer';
import { map, concatMap, catchError, forkJoin } from 'rxjs/operators';
import { of } from 'rxjs';
import { HttpService } from './services/http.service';
import { City } from './models/city.model'; // 可替换为你实际的城市类型定义

@Injectable()
export class AppEffects {

  effect$ = createEffect(() =>
    this.actions$.pipe(
      ofType(addCityToIndex),
      // 此处假设addCityToIndex的payload结构为{cities: City[]}，可根据你的实际定义调整
      concatMap((action) => {
        // 为每个城市生成对应的更新请求Observable
        const cityUpdateRequests$ = action.cities.map((city: City) => {
          // 按你的业务需求传入城市属性调用Http服务，此处为示例
          return this.http.updateCity(city.id, city);
        });
        // 等待所有城市更新请求完成，统一拿到更新后的城市数组
        return forkJoin(cityUpdateRequests$).pipe(
          // 全部请求成功，派发携带新数组的目标action
          map((updatedCities: City[]) => returnCityToIndex({ cities: updatedCities })),
          // 捕获请求错误，派发错误处理action，避免Effect实例终止
          catchError((err) => of(updateCityFail({ error: err })))
        );
      })
    ), {});

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

补充说明 #

• 操作符选择：如果新的addCityToIndex触发时需要取消之前未完成的更新请求，就把concatMap换成switchMap；如果允许多个更新请求并行处理，就换成mergeMap。
• 你可以根据业务需要调整请求逻辑，比如不需要全量更新所有数组元素，只更新指定元素的话，直接在数组map逻辑里加判断条件即可。
• 必须添加错误处理逻辑，否则任意一次HTTP请求失败都会导致整个Effect终止，后续再也不会响应对应action。

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