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')
- идентичные действия