Почему для предотвращения гонок запросов могут выбрать Redux-Saga с takeLatest, а не thunk с AbortController?

Гонка запросов возникает, когда пользователь быстро меняет параметры (например, вводит поисковый запрос), и ответы приходят не в том порядке, в котором были отправлены. В результате на экране может оказаться устаревший результат. Оба подхода решают эту проблему, но по-разному.

Как работает takeLatest в Redux-Saga

takeLatest — это эффект, который запускает сагу на каждый экшен, но при появлении нового экшена того же типа автоматически отменяет предыдущую запущенную сагу. Отмена происходит на уровне генератора: все вложенные эффекты (call, put, fork) прерываются, а промисы, если они поддерживают отмену, отменяются.

import { takeLatest, call, put } from 'redux-saga/effects';

function* fetchUser(action) {
  const user = yield call(api.getUser, action.payload);
  yield put({ type: 'USER_SUCCESS', payload: user });
}

function* watchFetchUser() {
  yield takeLatest('USER_REQUEST', fetchUser);
}

Здесь достаточно одного takeLatest — и все предыдущие запросы отменяются автоматически. Никакого ручного управления контроллерами не нужно.

Как работает thunk с AbortController

В thunk отмена реализуется вручную: нужно создать AbortController, передать его signal в fetch/axios, сохранить контроллер (например, в замыкании или в store) и вызвать abort() при новом запросе.

let controller;

export const fetchUser = (id) => async (dispatch) => {
  if (controller) controller.abort();
  controller = new AbortController();
  try {
    const res = await fetch(`/api/user/${id}`, { signal: controller.signal });
    const data = await res.json();
    dispatch({ type: 'USER_SUCCESS', payload: data });
  } catch (e) {
    if (e.name !== 'AbortError') throw e;
  }
};

Код работает, но управление отменой размазано по thunk-функциям, легко забыть вызвать abort или неправильно обработать AbortError.

Сравнение подходов

• Декларативность: takeLatest описывает правило отмены один раз, thunk требует императивного кода в каждом месте.
• Композиция: саги легко комбинировать (race, all, debounce, throttle), thunk — нет.
• Тестируемость: саги тестируются чистыми генераторами без моков fetch, thunk требует моков и контроллеров.
• Порог входа: thunk проще для новичков, saga требует изучения эффектов.

Когда что выбирать

Если в проекте уже есть redux-saga и много сложных асинхронных сценариев (отмена, retry, параллельные запросы, debounce), takeLatest — естественный выбор. Если проект небольшой и используется только thunk, AbortController справится, но потребует дисциплины и шаблонного кода.

Итог: takeLatest выигрывает за счёт декларативности и централизации логики отмены, тогда как thunk с AbortController — более низкоуровневое и ручное решение, уместное в простых приложениях без саг.