为什么Async Await不能与Angular@Action一起工作

这是可行的，但如果可能的话，我想在一个链中添加更多的操作

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) => {
}
}

@操作（上传挂起文件）
uploadPendingFiles（ctx:StateContext，action:UploadFiles）{
返回此.uploads.start（action.files，config.pipe）(
轻触（（响应）=>{
}
}

async/await只是一种与

Promise

一起使用的语法。您不能将它与

Observable

这样的任何东西一起使用，即

action$

等待操作的结果有点奇怪，应该使用

correlationId

，这会使代码更加复杂。这就是为什么我不想在这些情况下使用Redux的效果。

存储.dispatch（）返回一个

可观察的

，该操作在成功时完成。您可以执行以下操作：

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

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
}

显然，您也应该能够使用

.toPromise（）

，但我建议您不要这样做，因为

可观察的

更灵活。如果您想做承诺，可以执行以下操作：

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

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 whatEverMethod（）：Promise{
等待这个.store.dispatch（新上传的pendingFiles（pendingFiles））.toPromise（）；
等待这个.store.dispatch（新的CreateEmailLink（this.getPayload（））.toPromise（）；
//现在这里有警报程序
}

谢谢，但我已经有了一个使用@Action everywhere的现有代码库，我尝试了.toPromise（）在Action return上，但也失败了。使用subscribe处理我当前的情况是唯一的方法吗？Kruijit感谢您的精彩解释和多种解决方案。我使用了您的延迟方法，效果非常好。我想使用toPromise（），但我不确定失去灵活性的区别是什么。我试着从ngxs上阅读文档，但找不到任何东西。我有点仓促，延迟没有启动发送电子邮件，而是.toPromise（）工作，除了我不能听错误。最后我可能不得不恢复到原来的，看起来不是最好的，但至少它工作。谢谢anyway@Gavin我删除了我的concat解决方案，这是错误的运算符。你应该使用

concat映射

进行顺序观察我从来不知道

ngxs

调度会返回可以观察到。它比ngrx更具意义，因为有太多的样板文件。我想有一天我会将ngrx迁移到ngxs。@HTN在ngxs问世之前，我没有跳上react/store的潮流，主要是因为ngrx样板文件，而且一切都更简单/整洁：）