В чем разница между Redux ToolKit и Redux Saga

«В чем разница между Redux ToolKit и Redux Saga» — вопрос из категории Библиотеки, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Redux Toolkit (RTK) — это официальный набор инструментов для Redux, упрощающий настройку хранилища, создание редьюсеров (через createSlice) и асинхронной логики (через createAsyncThunk). Он включает в себя Immer для иммутабельных обновлений и Redux Thunk по умолчанию.

Redux Saga — это middleware для обработки сайд-эффектов (например, API-запросов) с использованием генераторов. Позволяет писать сложную асинхронную логику в виде синхронного кода.

Ключевые отличия:

  • RTK проще в настройке и требует меньше кода.
  • Saga мощнее для сложных сценариев (отмена запросов, race-условия).
  • RTK использует Thunk, Saga — генераторы.

Пример RTK (async thunk):

const fetchUser = createAsyncThunk('users/fetch', async () => {
  const response = await fetch('/api/users');
  return response.json();
});

Пример Saga:

function* fetchUser() {
  try {
    const response = yield call(fetch, '/api/users');
    yield put({ type: 'FETCH_SUCCESS', payload: response.json() });
  } catch (error) {
    yield put({ type: 'FETCH_ERROR', error });
  }
}