代码之家 › 专栏 › 技术社区 › james Makinde

将rxjs与搜索或选择结合使用

combinelatest ngrx-store ngrx rxjs angular

james Makinde · 技术社区 · 6 年前

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

我有两个可以观察到的对象,我想调用我的存储并通过过滤两种方式获取细节,但是我想使用combinelast函数来简化我的代码。文本搜索传入一个要搜索的字符串,而单击传入一个数字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 }));
      });

我的问题是,如何将此代码简化为使用combinelast,因为两者都是非常相似的操作,并且实现了对存储在存储区中的项的搜索,以便根据键入的文本进行筛选。

1 回复 | 直到 6 年前

Gabriel Guerrero 6 年前

我将分两部分回答这个问题,您希望组合Does和Does两个流并触发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而不是combinetest,这是因为后者希望两个流在允许触发操作之前都生成一些内容,而您将收到两个值,您希望的是,如果搜索或单击生成一个事件,则该操作应该触发whic这就是我使用merge的原因。

现在我建议你修改一下你的方法,不确定你是否读过dumb vs smart的哲学,如果你在使用ngrx的时候没有帮助的话,可以用google搜索一下ngrx的示例应用。 https://github.com/ngrx/platform/tree/master/example-app,for 我是最好的医生。
如果我很好地理解了您想要实现的目标,我将有一个用于输入搜索的哑组件(这个i imaging是一种自动完成项目的建议框),当通过click或enter选择一个选项时,它将输出查询事件,并且项目列表页将是另一个哑组件。在单击时输出查询事件的t,每个事件将绑定到容器(智能组件)中的同一方法,该方法将分派queryaction 希望有帮助