将动作链接在一起以产生NgRx(角度)

我有一个有效的效果,但是我需要在通过简化器在第一个动作中更新状态之后,将其与另一个动作中调用的服务链接起来。

效果如下:

@Effect()
uploadSpecChange$: Observable<action> = this.actions$.pipe(
    ofType(Appactions.WorkspaceactionTypes.UploadChange),switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f,'load');
    }),map((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return
            new Appactions.UploadComplete(res),new Appactions.PerformCalc()
    })
);

我添加了第二个动作,但是现在出现了一个可观察到的错误。

wuyunlong152 回答:将动作链接在一起以产生NgRx(角度)

因此,如果您想从一个效果中分派多个动作,则可以返回一系列动作并将map替换为mergeMap

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),switchMap((x: any) => {
        let f = new FileReader();
        f.readAsText(x.payload);
        return fromEvent(f,'load');
    }),mergeMap((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return [
            new AppActions.UploadComplete(res),new AppActions.PerformCalc()
        ];
    })
);

但是,如果希望在完成PerformCalc操作后立即分派UploadComplete操作,则应分派PerformCalc作为UploadComplete的副作用:>

@Effect()
uploadSpecChange$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadChange),map((result: any) => {
        const raw = (<FileReader>result.target).result as string;
        const res = JSON.parse(raw);
        // console.log(res);
        return new AppActions.UploadComplete(res);
    })
);

@Effect()
uploadComplete$: Observable<Action> = this.actions$.pipe(
    ofType(AppActions.WorkspaceActionTypes.UploadComplete),map(() => new AppActions.PerformCalc())
);
,

如果有多个操作,则返回@Effect

您需要使用concatMap而不是map

concatMap((result: any) => {
    const raw = (<FileReader>result.target).result as string;
    const res = JSON.parse(raw);
    return [
        new AppActions.UploadComplete(res),new AppActions.PerformCalc()
    ]
})
,

您可以使用操作符的switchMap&来做到这一点

@Effect()
dispatchMultiAction$: Observable<Action> = this.actions$.pipe(
    ofType<SomeAction.Dispatch>(someActions.Dispatch),switchMap(_ =>
        of(
            new someActions.InitData(),new someActions.GetData(),new someActions.LoadData()
        )
    )
);
本文链接:https://www.f2er.com/3121177.html

大家都在问