javascript - 将 Action 链接在一起形成 NgRx (Angular) 的效果

Question

我有一个有效的效果，但我需要将其与在第一个操作中通过 reducer 更新状态后在另一个操作中调用的服务链接起来。

效果如下:

@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()
    })
);

我添加了第二个操作，但现在收到了 Observable 错误。

Answer 1

因此，如果您想从效果中分派(dispatch)多个操作，您可以返回一组操作并将您的 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()
        ];
    })
);

但是，如果您希望在 UploadComplete 操作完成后调度 PerformCalc 操作，则应调度 PerformCalc 作为副作用UploadComplete:

@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);
    })
);

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