为什么 Async Await 不能与 Angular @Action 一起使用

Question

这可行，但如果可能，我想在链中添加更多操作。

this.store.dispatch(new UploadPendingFiles(pendingFiles));
this.actions$.pipe(ofActionSuccessful(UploadPendingFiles)).subscribe(() => {
    alert('UploadPendingFilesComplete');
    this.store.dispatch(new CreateEmailLink(this.getPayload())).subscribe(
        () => {
            this.sent.emit('true');
        },
        (error) => {
            console.log(error);
            this.errors$.next(error.messages);
        }
    );
});

想要使用更多异步等待的这种风格，但它会在错误的时间触发。

this.store.dispatch(new UploadPendingFiles(pendingFiles));
    alert('UploadPendingFilesComplete');
// Need alert to proc here
    await this.actions$.pipe(ofActionSuccessful(UploadPendingFiles));
    // await Another @Action
    await this.store.dispatch(new CreateEmailLink(this.getPayload()));
// Alert procs here at the moment

一段@Action

 @Action(UploadPendingFiles)
    uploadPendingFiles(ctx: StateContext<DriveStateModel>, action: UploadFiles) {
     return this.uploads.start(action.files, config).pipe(
            tap((response) => {
}
}

Answer 1

async/await 只是用于 Promise 的语法。您不能将它与 Observable 等其他任何内容一起使用，即 action$.

等待动作的结果有点奇怪，应该用 correlationId 来完成，这会使代码更加复杂。这就是为什么我不想在这些情况下使用 Redux 的 Effect 的原因。

Answer 2

store.dispatch() returns 一个 Observable 成功完成。您可以执行以下操作：

this.store.dispatch(new UploadPendingFiles(pendingFiles)).pipe(
  concatMap(() => this.store.dispatch(new CreateEmailLink(this.getPayload()))
).subscribe(() => {
  // Alert procs here at the moment
});

显然你也应该可以使用 .toPromise()，但我建议你不要那样做，因为 Observables 更灵活。如果你想做promises，你可以这样做：

async whatEverMethod(): Promise<any> {
  await this.store.dispatch(new UploadPendingFiles(pendingFiles)).toPromise();
  await this.store.dispatch(new CreateEmailLink(this.getPayload()).toPromise();

  //alert procs here at the moment
}

为什么 Async Await 不能与 Angular @Action 一起使用

Why is Async Await not working with Angular @Action

angular

ngxs