使用 NGRX 的 RXJS 链订阅反模式

Question

我有以下代码，它正在工作，但我读过链接订阅是一种反模式。在调用需要用户 authtoken 的 API 之前，我需要确保用户的登录状态为 true。

在 RXJS 中处理这个问题的正确方法是什么？

const subscrAuth = this.store
  .pipe(select(isLoggedIn))
  .subscribe(isLoggedIn => {
    console.log(isLoggedIn);
    if (isLoggedIn) {
      const subscrLoaded = this.store
        .pipe(select(hasCarriersLoaded))
        .subscribe(hasCarrierLoaded => {
          if (!hasCarrierLoaded) {
            this.store.dispatch(new CarriersPageRequested());
          }
        });
    }
  });
this.unsubscribe.push(subscrAuth);

Answer 1

如果只是 API 调用，则无需取消订阅，因为它会自行完成。您可以使用switchMap 链接和filter 到.. 过滤:)。而且你有一个很好的 rxjs 运算符链，它可以自我完成

this.store.pipe(
  select(isLoggedIn),
  take(1),
  filter((isLoggedIn) => isLoggedIn),
  switchMapTo(this.store),
  select(hasCarriersLoaded),
  take(1),
  filter((hasCarriersLoaded) => !hasCarriersLoaded),
).subscribe(() => this.store.dispatch(new CarriersPageRequested()));

感觉好像可以结合两个选择：

combineLatest([
  this.store.pipe(select(isLoggedIn)),
  this.store.pipe(select(hasCarriersLoaded))
]).pipe(
  take(1),
  filter(([loggedIn, hasCarriers]) => loggedIn && !hasCarriers)
).subscribe(() => this.store.dispatch(new CarriersPageRequested()));

如果您需要在用户登录之前等待，在处理此请求时，您可以执行以下操作：

combineLatest([
  this.store.pipe(select(hasCarriersLoaded)),
  this.store.pipe(
    select(isLoggedIn),
    filter((loggedIn) => loggedIn)
  )
]).pipe(
  take(1),
  filter(([hasCarriers]) => !hasCarriers)
).subscribe(() => this.store.dispatch(new CarriersPageRequested()));

如果您还需要等待登录才能调用hasCarriersLoaded，则应在第一个示例中将filter与take(1)切换

Answer 2

这样的？

const subscrAuth = this.store
.pipe(
  select(isLoggedIn),
  switchMap(isLoggedIn => {
    this.store.pipe(
      select(hasCarriersLoaded),
      tap(hasCarriersLoaded => {
        this.store.dispatch(new CarriersPageRequested());
      })
     )
  })
).subscribe();
this.unsubscribe.push(subscrAuth);

我还建议您使用 ngOnDestroy 函数来管理您的订阅，

onDestroy$: Subject<null> = new Subject();

ngOnDestroy() {
    this.onDestroy$.next();
}

this.store
.pipe(
  takeUntil(this.onDestroy$),
  select(isLoggedIn),
  switchMap(isLoggedIn => {
    this.store.pipe(
      select(hasCarriersLoaded),
      tap(hasCarriersLoaded => {
        this.store.dispatch(new CarriersPageRequested());
      })
     )
  })
).subscribe();

或者如果您只进行一次调用，您也可以像这样修改管道

this.store
.pipe(
  take(1),
  select(isLoggedIn),
  switchMap(isLoggedIn => {
    this.store.pipe(
      select(hasCarriersLoaded),
      tap(hasCarriersLoaded => {
        this.store.dispatch(new CarriersPageRequested());
      })
     )
  })
).subscribe();