Как Redux Thunk и Redux Saga подключаются к Redux

Redux сам по себе ожидает, что в dispatch попадет action object. Middleware стоит между dispatch и reducer. Он может перехватить action, выполнить побочную работу, изменить поток или передать action дальше.

Поэтому Thunk и Saga подключаются не как reducer и не как React-компонент. Они расширяют store через middleware. Разница в модели работы. Thunk исполняет функции, которые вы dispatch-ите. Saga запускает отдельные генераторы, которые слушают actions и выполняют эффекты.

Коротко можно ответить так: подключение идет через middleware, но запуск отличается. У Thunk достаточно middleware в store. У Saga есть два шага: добавить middleware и запустить root saga.

В Redux Toolkit thunk уже включен в default middleware. Поэтому для обычного thunk action creator чаще всего не нужна отдельная строка подключения.

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducer";

export const store = configureStore({
  reducer: rootReducer,
});

export const fetchUser = (id: string) => async (dispatch, getState) => {
  dispatch({ type: "user/requested" });

  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error("User request failed");
    }

    const user = await response.json();
    dispatch({ type: "user/loaded", payload: user });
  } catch (error) {
    dispatch({ type: "user/failed", error: String(error) });
  }
};

В legacy Redux подключение обычно показывают через applyMiddleware.

import { createStore, applyMiddleware } from "redux";
import { thunk } from "redux-thunk";
import rootReducer from "./rootReducer";

const store = createStore(rootReducer, applyMiddleware(thunk));

Практический риск простой. Если thunk middleware нет, dispatch(fetchUser(id)) отдаст в Redux функцию, а не plain action. Без middleware Redux не знает, что с ней делать. Без обработки response.ok, ошибки и сброса loading такой thunk еще и оставит интерфейс в неверном состоянии.

Saga подключается тоже через middleware, но на этом настройка не заканчивается. Вы создаете middleware, добавляете его в store, а потом запускаете root saga. Root saga обычно собирает watcher-саги, которые слушают actions.

import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./rootReducer";
import { rootSaga } from "./rootSaga";

const sagaMiddleware = createSagaMiddleware();

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(sagaMiddleware),
});

sagaMiddleware.run(rootSaga);

Если вы хотите использовать Saga как основной механизм side effects, можно отдельно решить, оставлять ли thunk в default middleware. На интервью не говорите, что они конфликтуют сами по себе. Они могут жить вместе. Просто смешивание подходов должно быть осознанным.

Вопрос формально про подключение, но часто за ним проверяют практическое понимание. Не ограничивайтесь фразой про middleware. Добавьте, почему в одном проекте выбирают Thunk, а в другом Saga.

Thunk хорошо подходит, когда логика помещается рядом с async action: показать loader, сделать запрос, обработать успех и ошибку. Но даже в thunk нужно думать о повторном клике, отмене запроса при уходе со страницы и позднем ответе сервера. Saga полезнее, когда side effects похожи на отдельный процесс: нужно отменять предыдущий запрос, ждать несколько событий, запускать фоновые задачи, делать retry или описывать race condition.

Можно ответить так:

Redux Thunk и Redux Saga подключаются к Redux через middleware. В Redux Toolkit thunk обычно уже входит в default middleware, а в старом Redux его добавляют через applyMiddleware(thunk). Saga настраивается через createSagaMiddleware(), затем этот middleware добавляют в store и вызывают sagaMiddleware.run(rootSaga). Thunk позволяет dispatch-ить функции с dispatch и getState, а Saga запускает генераторы, которые слушают actions и управляют side effects.

Если хотите усилить ответ, добавьте практический выбор:

Для простого запроса я бы чаще выбрал thunk или createAsyncThunk. Для процессов с отменой, debounce, race, параллельными задачами или долгими сценариями Saga обычно дает более управляемую модель.