Как реализовать аналог Debounce для действия ngxs? - PullRequest
Новая
       11

Как реализовать аналог Debounce для действия ngxs?

0 голосов
/ 10 сентября 2018

У меня есть поисковый ввод: 

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

Когда пользователь печатает, он будет вызывать функцию projectFilter после каждого изменения модели.

Как я могу реализовать Debounce с помощью ngxs?

например, действия по отправке только через 0,5 с после того, как пользователь закончит ввод? 

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

1 Ответ

0 голосов
/ 12 сентября 2018

Один из способов сделать это - создать наблюдаемую цепочку, используя 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 как наблюдаемые бесплатно.

Надеюсь, это поможет.

...