Что такое Redux Observable и зачем он используется вместе с RxJS?

Что такое Redux Observable?

Redux Observable — это middleware для Redux, которое интегрирует библиотеку RxJS для управления побочными эффектами. Вместо того чтобы писать сложную логику в action creators или reducers, вы определяете "epics" — функции, которые принимают поток всех действий (action$) и возвращают новый поток действий. Это позволяет обрабатывать асинхронные операции, такие как HTTP-запросы, таймеры или веб-сокеты, с использованием мощных операторов RxJS.

Как это работает?

Epics — это чистые функции, которые получают поток действий и возвращают поток действий. Они не изменяют состояние напрямую, а только диспатчат новые действия. Например, вы можете создать epic, который слушает действие FETCH_USER, делает запрос к API и диспатчит FETCH_USER_SUCCESS или FETCH_USER_FAILURE.

import { ofType } from 'redux-observable';
import { ajax } from 'rxjs/ajax';
import { map, switchMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

const fetchUserEpic = (action$) =>
  action$.pipe(
    ofType('FETCH_USER'),
    switchMap((action) =>
      ajax.getJSON(`/api/users/${action.payload}`).pipe(
        map((response) => ({
          type: 'FETCH_USER_SUCCESS',
          payload: response,
        })),
        catchError((error) =>
          of({
            type: 'FETCH_USER_FAILURE',
            payload: error.message,
          })
        )
      )
    )
  );

Зачем использовать Redux Observable?

Redux Observable особенно полезен, когда вам нужно управлять сложными асинхронными потоками, такими как отмена запросов, debounce, throttle или комбинирование нескольких источников данных. RxJS предоставляет богатый набор операторов для работы с временем и событиями, что делает код более декларативным и легким для тестирования.

Пример использования

Предположим, у вас есть поисковая строка, которая отправляет запросы при каждом вводе. Без Redux Observable вы бы использовали debounce вручную, но с RxJS это делается просто:

const searchEpic = (action$) =>
  action$.pipe(
    ofType('SEARCH'),
    debounceTime(300),
    switchMap((action) =>
      ajax.getJSON(`/api/search?q=${action.payload}`).pipe(
        map((response) => ({
          type: 'SEARCH_SUCCESS',
          payload: response,
        }))
      )
    )
  );

Здесь debounceTime(300) задерживает обработку на 300 мс, а switchMap отменяет предыдущий запрос, если пришел новый.

Вывод

Redux Observable стоит применять, когда ваше приложение требует сложной асинхронной логики, такой как отмена запросов, комбинирование потоков или работа с реальным временем. Он делает код более предсказуемым и тестируемым, но требует понимания RxJS.