RxJS 使用 snapshotChanges() 的方式是啥？

Posted 2023-03-13

【中文标题】RxJS 使用 snapshotChanges() 的方式是啥？

【英文标题】：What is the RxJS way of working with snapshotChanges()?RxJS 使用 snapshotChanges() 的方式是什么？

【发布时间】：2021-09-26 08:12:34

【问题描述】：

所以我有一个 auth.service.ts、crud.service.ts 和一个 components.ts。虽然我编写的代码有效，但它恰好是多个教程和文档的组合。我想知道如何组合下面的代码以使其整洁，并且所有逻辑仅在 crud.service.ts 中使用 rxjs 运算符发生。最终结果将返回一个完全格式化的可观察项目集合。

crud.service.ts 

 getTasks() 
   return this.auth.user$.pipe(
    switchMap((value: any) => this.db.collection(`users/$value.uid/tasks`).snapshotChanges())
  )

component.ts

ngOnInit(): void 
    this.fireService.getTasks().subscribe((a: any) => 
      this.tasks = []
      a.forEach((b: any) => 
        let item: any = b.payload.doc.data();
        item.id = b.payload.doc.id;
        item.defaultState = true
        this.tasks.push(item)
      )
    )

【问题讨论】：

您可以在管道中使用map 运算符并将代码的item 部分移到那里。在您的订阅中，您只需分配 tasks 数组。

如果您可以发布工作代码作为答案，我可以立即接受并关闭问题:)

【参考方案1】：

您的服务应该处理数据并对其进行整形：

 getTasks() 
   return this.auth.user$.pipe(
    switchMap((value: any) => 
    this.db.collection(`users/$value.uid/tasks`).snapshotChanges()),
    map( (val) => 
           val.map( (inner) => 
              let item: any = b.payload.doc.data();
              item.id = b.payload.doc.id;
              item.defaultState = true;
              return item;
            ))
  )

在您的订阅中，您只需分配值。

ngOnInit(): void 
    this.fireService.getTasks().subscribe((a: any) => 
      this.tasks = a;     
    )

【讨论】：

它说 switchMap 由于某种原因是一个不推荐使用的符号？此外，代码似乎不起作用 :( 真的很抱歉，但我对 ReactiveX 的概念不熟悉。

我其实尝试了很多其他的方法，问题表面上看起来很简单，但可能有点复杂。

@ParthSandeepAgarwal 它说已弃用，因为我忘记在.snapshotChanges() 之后放置)