Поисковый запрос с помощью RxJS

Rx.Observable
    .fromEvent(inputElement, 'input')
    .map((event) => event.target.value)
    .debounceTime(500)
    .distinctUntilChanged()
    .do(() => setLoading(true))
    .switchMap(value => fetchData(value))
    .do(() => setLoading(false))
    .subscribe(logToOutput)

// через pipe

fromEvent(inputElement, 'input')
    .pipe(
        pluck('target', 'value'),
        debounceTime(500),
        distinctUntilChanged(),
        tap(() => setLoading(true)),
        switchMap(query => fetchData(query)),
        tap(() => setLoading(false))
    )
    .subscribe(logToOutput)
  • debounceTime - отбрасывает исходящие значения, которые появляются в промежутке меньше заданного времени StackBlitz
  • distinctUntilChanged - пропускает значения только тогда, когда текущее значение отличается от предыдущего. StackBlitz
  • switchMap - завершение (complete) предыдущего потока и создание нового внутри switchMap
  • do/tap - создание побочных действий
  • map((event) => event.target.value) и pluck('target', 'value') - идентичные действия

Похожие записи

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

HTML атрибуты и DOM свойства

  • Значение HTML атрибута указывает начальное значение;
  • Значение DOM свойства является текущим значением;
  • Атрибуты инициализируют DOM свойства.

TypeScript Enum Flags (bitmask)

enum FileAccess {
    None,             // 000
    Read    = 1 << 1, // 001
    Write   = 1 << 2, // 010
    Execute = 1 << 3, // 100
    ReadWrite  = Read | Write, // 011
}

const f = FileAccess.Read | FileAccess.Execute;
f & FileAccess.Execute // true