如何为 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 之类的可观察对象。

希望对您有所帮助。

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

How to implement Debounce analog for ngxs action?

typescript

debouncing

ngxs