Question

我有以下情况。

如果用户只在/lobby没有?competitionId=的路线中输入，我必须在状态中搜索用户最喜欢的比赛。在收到用户最喜欢的比赛后，我必须将用户重定向到/lobby?competitionId=XYZ。

我使用以下代码。是一种更好的实施方式吗？它看起来像是对我的回调地狱。我正在使用NGRX。

RxJS Stream Observableable Way

redirectToCompetition(): void {
this._store.pipe(select(routerSelectors.getState)).subscribe(routerState => {
  if (!routerState.queryParams.competitionId) {
    this._store
      .pipe(select(authenticatedUserSelectors.getFavoriteCompetition))
      .subscribe(favoriteCompetition => {
        this._store.dispatch(
          new routerActions.NavigateTo({
            path: ['/lobby'],
            query: { competitionId: favoriteCompetition.id }
          })
        );
      });
  }
});
}

我使用async / await重写代码。它看起来更好。

承诺异步/等待方式

async redirectToCompetitionPromise() {
    const routerState = await this._store
      .pipe(select(routerSelectors.getState))
      .first()
      .toPromise();

    const userFavoriteCompetition = await this._store
      .pipe(select(authenticatedUserSelectors.getFavoriteCompetition))
      .first()
      .toPromise();

    if (!routerState.queryParams.competitionId) {
      this._store.dispatch(
        new routerActions.NavigateTo({
          path: ['/lobby'],
          query: { competitionId: userFavoriteCompetition.id }
        })
      );
    }
  }

使用带有异步/等待模式的RxJS有什么问题吗？或者在我的第一个代码中我做了一个糟糕的实现？

Answer 1

使用async / await和使用rxjs的承诺没有错，只是rxjs本身可以很好地处理它，如果正确使用

this._store
.pipe(select(routerSelectors.getState))
.first()
.filter(routerState =>routerState.queryParams.competitionId)
.switchMap(()=>this._store.pipe(select(authenticatedUserSelectors.getFavoriteCompetition)))
.do(favoriteCompetition =>
        this._store.dispatch(
          new routerActions.NavigateTo({
            path: ['/lobby'],
            query: { 
            competitionId: favoriteCompetition.id }
          })
        );
      ).subscribe()

我们可以使用asx / await和RxJS Pattern吗？

1 个答案: