> Как работает Redux Saga (JavaScript)

Redux Saga - это middleware-библиотека для управления побочными эффектами (side effects) в Redux-приложениях. Она использует генераторы (generators) из ES6, чтобы сделать асинхронные операции (например, запросы к API, таймеры, доступ к хранилищу) более читаемыми, тестируемыми и управляемыми.

Основная идея: вместо того чтобы вызывать асинхронные функции напрямую в action creator или reducer, вы описываете "саги" - отдельные функции-генераторы, которые слушают определённые Redux actions. Когда action срабатывает, сага может выполнять побочные эффекты (через специальные эффекты-помощники, такие как call, put, take, fork, select) и диспатчить новые actions.

Пример простой саги:

JAVASCRIPT
import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchUserApi } from './api';
import { FETCH_USER, fetchUserSuccess, fetchUserFailure } from './actions';

function* fetchUserSaga(action) {
  try {
    const user = yield call(fetchUserApi, action.payload.userId);
    yield put(fetchUserSuccess(user));
  } catch (error) {
    yield put(fetchUserFailure(error.message));
  }
}

function* watchFetchUser() {
  yield takeEvery(FETCH_USER, fetchUserSaga);
}

Здесь takeEvery слушает каждый action типа FETCH_USER, запускает сагу fetchUserSaga, которая вызывает API (call), а затем диспатчит success или failure action (put).

Ключевые преимущества:

• Тестируемость: саги - это чистые генераторы, их легко тестировать без моков.
• Управление конкурентностью: takeLatest, takeLeading, race и другие эффекты позволяют контролировать параллельные запросы.
• Композиция: саги можно комбинировать, запускать параллельно (all) или в фоне (fork).

Redux Saga особенно полезна в сложных сценариях: цепочки асинхронных действий, отмена запросов, работа с WebSocket, дебаунс.