49. Project: typeahead search

Проект 1 — поле живого поиска

Это первый из «проектных» уроков. Все операторы, которые в нём нужны, вы уже знаете по отдельности. Сейчас задача — собрать их в производственный паттерн typeahead-поиска.

Три «защитных слоя»

1. debounceTime(20) — не дёргаем сервер, пока пользователь печатает. Запрос полетит только после паузы.
2. distinctUntilChanged() — если значение не изменилось (например, символ удалили и сразу добавили), повторный запрос не нужен.
3. switchMap(searchApi) — если пришёл новый запрос, пока старый ещё выполняется, старый отменяется.

query$.pipe(
  debounceTime(20),
  distinctUntilChanged(),
  switchMap(q => searchApi(q))
)

const { debounceTime, distinctUntilChanged, switchMap } = Rx;

function createTypeahead$(query$, searchApi) {
  return query$.pipe(
    debounceTime(20),
    distinctUntilChanged(),
    switchMap(query => searchApi(query))
  );
}