javascript - RxJS:我应该如何通过socket.js事件更新observable中的元素？

Question

试图重新实现公司的主要应用程序，从 Promises 和命令式风格切换到 RxJS 和函数式风格。并发现自己处于一种特定的情况。

问题:我们的系统中有一个可以过滤的帖子列表。因此，我创建了一个非常简单的过滤器组件和一个列表组件，我在其中接收如下数据:

this.items = this.filterChange
    .startWith(this.filterComponent.initialValue);
    .debounceTime(400)
    .switchMap((data) => this.process(data))
    .share();

但是然后我需要从套接字插入另一个事件来更新列表中的各个元素。我们的 process 函数可以理解这两个事件并对它们使用react，但问题是:

merge(this.filterChange.debounceTime(400), this.socketUpdates)
    .startWith(this.filterComponent.initialValue);
    .switchMap((data) => this.process(data))
    .share();

如果在搜索更改后立即进行更新，我们会丢失搜索更改结果，在这种情况下我该怎么办？

PS:我考虑过将combineLatest + pariwise作为一个选项，以便能够了解更改的内容并对其使用react。难道没有更优雅的解决方案吗？

Answer 1

这实际上是 RxJS 的一个常见错误，当您应该使用 concatMap (或者可能是 mergeMap)时，您却使用了 switchMap。

switchMap 仅对于无副作用的只读请求/消息才真正安全。如果您尝试通过网络更新记录，并且您关心更新的完成顺序和处理结果的顺序，那么您需要使用 concatMap。如果您不关心结果的顺序，则应该使用 mergeMap。

• switchMap - 当任何待处理的 Observable 获得新值时，将取消订阅，从而丢弃其响应。
• mergeMap - 将立即启动并运行它创建的所有 Observables 并完成，而不关心结果合并时返回的顺序。
• concatMap - 一次仅按顺序运行一个 Observable，并且不删除任何内容。

merge(this.filterChange.debounceTime(400), this.socketUpdates)
    .startWith(this.filterComponent.initialValue);
    .concatMap((data) => this.process(data))
    .share();