Чем Saga отличается от Thunk

Общая идея

Redux сам по себе синхронный, поэтому для асинхронной логики используются middleware.

Redux Thunk

Thunk позволяет экшену быть функцией.

const fetchData = () => (dispatch) => {
  dispatch(start());
  fetch(url)
    .then(r => r.json())
    .then(data => dispatch(success(data)));
};

Характеристики:

1. Минимальный порог входа

2. Логика и экшены смешаны

3. Хорош для простых запросов

4. Сложно тестировать сложные сценарии

Redux Saga

Saga использует генераторы для описания эффектов.

function* fetchDataSaga() {
  try {
    const data = yield call(api.fetch);
    yield put(success(data));
  } catch (e) {
    yield put(error(e));
  }
}

Характеристики:

1. Чёткое разделение логики и экшенов

2. Декларативное описание эффектов

3. Удобна для сложных сценариев

4. Хорошо тестируется

5. Более высокий порог входа

Ключевые различия по подходу

1. Thunk — imperative

2. Saga — declarative

3. Thunk — проще читать новичкам

4. Saga — лучше масштабируется

Вывод

Thunk — быстрый и простой выбор для небольших проектов. Saga оправдана, когда логика сложная, асинхронная и требует строгого контроля.