В чем отображается основная фича Redux Saga?

В чем отображается основная фича Redux Saga

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

Что такое побочные эффекты

Побочные эффекты - это все операции, которые выходят за рамки чистых функций:

// Побочные эффекты:
- HTTP запросы
- Работа с localStorage
- Таймеры (setTimeout, setInterval)
- Навигация
- Логирование
- Работа с файловой системой
- WebSocket соединения

Без Redux Saga (старый подход)

// Мидлвэр Thunk - много boilerplate кода
const fetchUsers = () => async (dispatch) => {
  dispatch({ type: 'FETCH_USERS_START' });
  try {
    const response = await fetch('/api/users');
    const data = await response.json();
    dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_USERS_ERROR', payload: error });
  }
};

// Компонент
const UsersComponent = () => {
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);
};

С Redux Saga (чистый и масштабируемый)

// Saga - это генератор функция
function* fetchUsersSaga() {
  try {
    // yield - приостанавливает выполнение
    const response = yield call(fetch, '/api/users');
    const data = yield call([response, response.json]);
    
    // Диспатчим экшн
    yield put({ type: 'FETCH_USERS_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_USERS_ERROR', payload: error });
  }
}

// Слушаем экшны
function* watchFetchUsers() {
  yield takeEvery('FETCH_USERS_REQUEST', fetchUsersSaga);
}

Основные фичи Redux Saga

1. Генераторы - главная фишка

// Генератор может приостановиться (yield) и возобновиться
function* simpleSaga() {
  console.log('1');
  yield delay(1000);  // Приостанавливается на 1 секунду
  console.log('2');
  yield delay(1000);
  console.log('3');
}

2. Эффекты (Effects) - декларативное описание побочных эффектов

import { call, put, select, take, fork, race, all } from 'redux-saga/effects';

// call - вызвать функцию
const data = yield call(fetch, '/api/users');

// put - задиспатчить экшн
yield put({ type: 'ACTION', payload: data });

// select - получить state
const users = yield select(state => state.users);

// take - ждать экшна
const action = yield take('USER_CLICKED');

// fork - запустить saga без ожидания
yield fork(backgroundSaga);

// race - кто выполнится первым
const { data, timeout } = yield race({
  data: call(fetch, '/api/users'),
  timeout: delay(5000),
});

// all - выполнить все параллельно
yield all([
  call(saga1),
  call(saga2),
  call(saga3),
]);

Практический пример: управление комплексными операциями

// Сага для управления логином с проверкой
function* loginSaga({ payload: { username, password } }) {
  try {
    // Показываем loading
    yield put({ type: 'LOGIN_START' });
    
    // Вызываем API
    const response = yield call(loginAPI, username, password);
    
    // Сохраняем токен в localStorage
    yield call([localStorage, localStorage.setItem], 'token', response.token);
    
    // Успешно
    yield put({ type: 'LOGIN_SUCCESS', payload: response.user });
    
    // Перенаправляем
    yield call([window.location, window.location.assign], '/dashboard');
  } catch (error) {
    yield put({ type: 'LOGIN_ERROR', payload: error.message });
  }
}

// Слушаем экшн LOGIN_REQUEST и вызываем saga
function* watchLogin() {
  yield takeEvery('LOGIN_REQUEST', loginSaga);
}

Отмена операций (Cancellation)

function* uploadFileSaga({ payload: file }) {
  try {
    yield put({ type: 'UPLOAD_START' });
    
    // Если придёт экшн UPLOAD_CANCEL, выполнение прерывается
    yield race([
      call(uploadFile, file),
      take('UPLOAD_CANCEL'),
    ]);
    
    yield put({ type: 'UPLOAD_SUCCESS' });
  } catch (error) {
    yield put({ type: 'UPLOAD_ERROR', payload: error });
  }
}

Управление параллельными операциями

// Не запускать более одного запроса одновременно
function* debounceSearchSaga() {
  yield takeLatest('SEARCH_INPUT', searchSaga);
}

// Отменить предыдущий если приходит новый экшн
function* watchSearch() {
  while (true) {
    const action = yield take('SEARCH_REQUEST');
    // Запускаем, но если придёт новый экшн, отменяем старый
    yield race([
      call(performSearch, action.payload),
      take('SEARCH_REQUEST'),
    ]);
  }
}

Тестирование Redux Saga

import { runSaga } from 'redux-saga';

// Генератор легко тестировать
test('fetchUsersSaga', () => {
  const generator = fetchUsersSaga();
  
  // Первый yield - call
  const callEffect = generator.next();
  expect(callEffect.value).toEqual(
    call(fetch, '/api/users')
  );
  
  // Второй yield - put
  const putEffect = generator.next({ json: () => Promise.resolve([]) });
  expect(putEffect.value).toEqual(
    put({ type: 'FETCH_USERS_SUCCESS', payload: [] })
  );
});

Сравнение Redux Saga с другими подходами

Почему Saga отличается

// Чистота кода
// В Saga всё - это данные (эффекты)
// Её легко тестировать без мокирования

function* mySaga() {
  const result = yield call(expensiveOperation);
  // В тестах можно просто передать результат
}

// Против обычного Thunk с непредсказуемым flow
const myThunk = () => async (dispatch) => {
  const result = await expensiveOperation();
  // Тяжело тестировать
};

Вывод

Основная фишка Redux Saga - это использование генераторов для декларативного описания сложных побочных эффектов. Вместо написания callback-hell кода, вы описываете, ЧТО нужно сделать (эффекты), и Saga сама управляет КОГДА и КАК это делать. Это делает код более читаемым, тестируемым и масштабируемым.