如何用单一pipe和subscribe重构多过滤条件的Observable订阅代码？

你的代码存在重复订阅同一Observable的问题，且两次status === InteractionStatus.None的订阅逻辑完全一致，完全可以合并优化。

最简洁的单订阅方案 #

不需要用merge()，直接在单个订阅里根据状态分支处理即可，同时保留takeUntil防止组件销毁时的内存泄漏：

public ngOnInit() {
  this.broadcastService.inProgress$
    .pipe(takeUntil(this._destroying$))
    .subscribe((status: InteractionStatus) => {
      if (status === InteractionStatus.None) {
        this.setLoginDisplay();
      } else {
        console.log(status);
      }
    });
}

这个方案把所有逻辑收敛到一个订阅里，代码最简洁，也避免了重复订阅带来的不必要开销，还解决了原代码中重复执行setLoginDisplay的问题。

用merge()的方案（适合逻辑复杂场景） #

如果后续各分支逻辑变得复杂，不想把所有逻辑堆在subscribe回调里，可以用merge()合并多个处理流，同时统一添加销毁控制：

import { merge } from 'rxjs';
import { filter, tap } from 'rxjs/operators';

public ngOnInit() {
  const noneStatus$ = this.broadcastService.inProgress$.pipe(
    filter(status => status === InteractionStatus.None),
    tap(() => this.setLoginDisplay())
  );

  const otherStatus$ = this.broadcastService.inProgress$.pipe(
    filter(status => status !== InteractionStatus.None),
    tap(status => console.log(status))
  );

  merge(noneStatus$, otherStatus$)
    .pipe(takeUntil(this._destroying$))
    .subscribe();
}

不过这个方案在当前简单场景下略显冗余，优先推荐第一种单订阅分支的处理方式。

内容的提问来源于stack exchange，提问作者bob.mazzo