我有一个有效的效果,但我需要将其与在第一个操作中通过 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 错误。
最佳答案
因此,如果您想从效果中分派(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())
);
关于javascript - 将 Action 链接在一起形成 NgRx (Angular) 的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58809013/