Angular NgRx Effect中无法派发Action问题求助

问题描述 #

在NgRx Effect文件中无法派发Action：直接返回数据时代码能正常运行，但调用loadFilesSuccess()就失效。

问题根源 #

1. 错误处理逻辑违规：当前catchError直接返回error，这会导致Effect的Observable流抛出错误并永久终止，后续所有loadFiles动作都无法再触发这个Effect。NgRx要求Effect的错误处理必须返回包含Action的Observable，或者用EMPTY忽略错误。
2. Action参数缺失：如果loadFilesSuccess是需要携带数据的ActionCreator，调用时没传入接口返回的data，会生成不符合预期的Action，导致Reducer无法识别，看起来像是没有派发成功。

修复后的代码 #

import { Injectable } from "@angular/core";
import { Actions, createEffect, ofType} from "@ngrx/effects";
import { RequestService } from "../services/request.service";
import { loadFiles, loadFilesSuccess } from "../actions/files.actions";
import { exhaustMap, map, catchError } from "rxjs/operators";
import { EMPTY } from "rxjs";

@Injectable({
    providedIn: "root"
})
export class RequestEffects {
    constructor(private actions$: Actions, private requestService: RequestService) { }

    sendFile$ = createEffect(() => {
        return this.actions$.pipe(
            ofType(loadFiles),
            exhaustMap((action) => {
               return this.requestService.sendDatas(action.data).pipe(
                    map((data: any) => {
                        console.log(data)
                        // 把接口返回的数据传入success action（适配你的Action定义）
                        return loadFilesSuccess({ data });
                    }),
                    catchError((error) => {
                        console.log(error)
                        // 返回EMPTY避免流中断，也可以替换为自定义错误Action
                        return EMPTY;
                    })
                )
            })
        )
    });
}

核心修改说明 #

• 错误处理修正：将return error替换为return EMPTY，这样错误只会中断当前请求的流，不会导致整个Effect失效；如果需要处理错误状态，可以定义一个错误Action（比如loadFilesFailed），用of(loadFilesFailed(error))返回。
• Action传参补全：调用loadFilesSuccess时传入接口返回的data，确保Action携带正确的 payload，让Reducer能正常处理并更新状态。

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