如何用RxJS操作符过滤重复状态流？仅保留变更后的值

你需要在管道中添加RxJS的distinctUntilChanged操作符，它会自动过滤掉连续重复的发射值，只保留状态发生变化的项。

修改后的代码 #

export enum Status {
  pending = 'pending',
  error = 'error',
  success = 'success'
}

export class DashboardComponent implements OnInit {
    public loadingStatusOrders$: Observable<Status>;

    constructor(private readonly store: Store) {
    this.loadingStatusOrders$ = this.store.pipe(
      select(selectLoadingStatusAll),
      filter((status) => !!status),
      distinctUntilChanged() // 添加该操作符实现去重逻辑
         );
     }
}

原理说明 #

• distinctUntilChanged会对比当前发射的值与上一次发射的值，仅当两者不相等时，才会将当前值传递到下游Observable。
• 针对你的场景，连续重复的pending会被过滤，仅保留第一个pending；后续连续的success也只会保留第一个变更后的success，最终输出序列即为pending - success，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Balalayka