使用 filter() 运算符过滤值时触发副作用

Question

我正在处理在 debounceTime() 之后触发的用户名搜索输入。我也过滤掉值。如果值被过滤（例如设置错误消息和停止加载器），我想触发一些副作用。

我现在通过使用 tap() 并检查我稍后在 filter() 函数中检查的相同谓词来实现这一点。我觉得这是 bad/there 更合适的实现方式。

private setUserSearchObservable() {
    this.userSearch = userSearch$.pipe(
      tap(() => this.loading = true),
      debounceTime(500),
      this.filterValuesWithErrorMessages(),
      ......
    );
}

private filterValuesWithErrorMessages() {
    return pipe(
      tap((val: string) => { if (this.usernamesMatch(val)) { this.errorMessage = 'You will be added to the frame automatically'; this.loading = false; }}),
      tap((val: string) => { if (this.usernameInArray(val)) { this.errorMessage = 'User is already added'; this.loading = false; }}),
      tap((val: string) => { if (val.length < 2) { this.errorMessage = ''; this.loading = false; }}),
      filter((val: string) => (val.length >= 2 && !this.usernamesMatch(val) && !this.usernameInArray(val))),
    );
}

如您所见，我在 filter() 上使用它们之前使用 tap() 明确检查了完全相同的条件。有没有 operator/different 模式可以让我以更简洁的方式实现这一点？

Answer 1

稍微重构了你的代码，没有专门的运算符来处理错误检查，你可以使用switchMap和内部可观察对象如of、never来控制是否结果应该通过。

private setUserSearchObservable() {
    this.userSearch = userSearch$.pipe(
      tap(() => this.loading = true),
      debounceTime(500),
      map((value) => this.filterValuesWithErrorMessages(value)),
      swtichMap(msg => {
        if (msg !== false) {
          this.errorMessage = result
          this.loading = false
          return never()
        }
        return of(true)
      })
    );
  }

  private filterValuesWithErrorMessages(val) {
    if (this.usernamesMatch(val)) return 'You will be added to the frame automatically'
    if (this.usernameInArray(val)) return 'User is already added'
    if (val.length < 2) return ''
    return false
  }

使用 filter() 运算符过滤值时触发副作用

Triggering side effects when a value is filtered using filter() operator

rxjs

rxjs-pipeable-operators

rxjs6