typescript - 如何为 ngxs 动作实现 Debounce 模拟？

Question

我有搜索输入：

<input type="text" (ngModelChange)="projectFilter()">

当用户键入时，它会在每次模型更改后调用 projectFilter 函数。

如何使用 ngxs 实现 Debounce？

例如，仅在用户完成输入后 0.5 秒后才发送操作？

  projectFilter() {
      this.store.dispatch([
        new SomeAction()
      );
    });
  }

Answer 1

做到这一点的一种方法是创建一个可观察的链，使用BehaviorSubject 调度动作debounceTime()。

// somewhere in your component class
projectFilter$ = new BehaviorSubject<string>('')

projectFilter() {
  // set next value instead of dispatching
  this.projectFilter$.next('current value')
}

ngOnInit() {
    // debounce whenever a new value is available with debounce
    this.projectFilter$.pipe(
      debounceTime(1000),
      tap(() => {
        this.store.dispatch(new MyAction())
      })
    ).subscribe()
}

注意：代码未经测试。只需使用它来理解概念并相应地实施。

或者，您可能想要使用反应形式。这样，您就valueChanges可以免费获得诸如 observable 之类的东西。

希望这可以帮助。