使用 RxJS CombineLatest 进行搜索或选择

Question

在我的应用程序中，我使用了 NGRX 和 RXJS。我有一个 window，用户可以在其中过滤订单，方法是在文本框中键入自由格式的文本，或者单击页面上的订单项目以查看详细信息。

我有两个可观察对象，我想调用我的存储并通过任一方式过滤获取详细信息，但我想使用 combineLatest 函数来简化我的代码。文本搜索传入一个字符串进行搜索，而点击传入一个数字id。我的代码中已经有了这个：

//Text search
 this.valueChanges = this.search.valueChanges
      .pipe(debounceTime(170), distinctUntilChanged())
      .subscribe(value => {
        this.hasValue = value.length > 0;
        this.store$.dispatch(new QueryAction({ value }));
      });

//Item click
      this.clickChanges = this.selected$.subscribe(value => {  
        let Id = value.id.toString();    
        this.store$.dispatch(new QueryAction({ value: Id }));
      });

我的问题是如何简化此代码以使用 combineLatest，因为两者是非常相似的操作，并且实现搜索存储在商店中的项目以根据输入的文本进行过滤。

Answer 1

我会分两部分回答这个问题，你想合并两个流并触发应该相当简单的 QueryAction，比如

const searchStream =  this.search.valueChanges
  .pipe(debounceTime(170), 
        distinctUntilChanged(), 
        filter(value => value.length > 0)
        );
const clickStream = this.selected$.pipe(map(value => value.id.toString());
merge(searchStream, clickStream)
.pipe(tap(value => this.store$.dispatch(new QueryAction({ value: value }), 
      takeWhile(() => !destroy) // make destroy= true in ngOnDrestroy()
).subscribe();

注意我使用 merge 而不是 combineLatest，这是因为后者会期望两个流在允许触发操作之前产生一些东西，并且您将收到两个值，如果搜索或者点击产生一个事件然后动作应该触发这就是我使用合并的原因。

现在我会建议你修改你处理这个问题的方式，不确定你是否读过愚蠢与聪明的哲学，google如果你没有读过它，它对你使用时有很大帮助ngrx，检查 ngrx 示例应用程序 https://github.com/ngrx/platform/tree/master/example-app,for 我是最好的文档。
如果我很好地理解你想要实现的目标，我将有一个用于输入搜索的愚蠢组件（我想象的是一种自动完成项目的建议框），当通过单击或输入选择选项时输出查询事件，并且项目列表页面将是另一个在单击时输出查询事件的哑组件，每个事件将绑定到容器（智能组件）中的相同方法，该方法将调度 QueryAction 希望对你有帮助

使用 RxJS CombineLatest 进行搜索或选择

Using RxJS CombineLatest with searching or selection

rxjs

ngrx

angular

combinelatest

ngrx-store