Question

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

我有两个observable，我想调用我的商店并通过过滤两种方式获取细节，但我想使用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，这是因为后者会期望两个流在允许触发操作之前生成某些内容，并且您将收到两个值，无论是搜索还是单击生成一个事件，然后该操作应该触发，这就是我使用merge的原因。

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

使用RxJS CombineLatest进行搜索或选择

1 个答案: