Что такое Redux Thunk и для чего он используется?react-38

Что такое Redux Thunk?

Redux Thunk - это middleware (промежуточное ПО) для Redux, который позволяет писать action creators (создатели действий), возвращающие функции вместо action objects (объектов действий).

Проблема, которую решает Thunk

По умолчанию Redux работает только с синхронными действиями. Однако в реальных приложениях часто нужно:

• Выполнять асинхронные запросы (API calls)
• Откладывать dispatch (диспетчеризацию действий)
• Условно dispatch'ить действия

Без Thunk эти операции было бы сложно реализовать.

Как работает Thunk?

Thunk проверяет каждое dispatched (отправленное) действие:

• Если это объект - пропускает как обычно
• Если это функция - вызывает её, передавая dispatch и getState

// Без Thunk - обычный action creator
function increment() {
  return { type: 'INCREMENT' };
}

// С Thunk - может возвращать функцию
function incrementAsync() {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(increment());
    }, 1000);
  };
}

Основные use cases

1. Асинхронные запросы к API

function fetchUser(id) {
  return async (dispatch) => {
    dispatch({ type: 'USER_FETCH_START' });
    try {
      const response = await api.getUser(id);
      dispatch({ type: 'USER_FETCH_SUCCESS', payload: response });
    } catch (error) {
      dispatch({ type: 'USER_FETCH_ERROR', error });
    }
  };
}

2. Условный dispatch

function fetchIfNeeded(id) {
  return (dispatch, getState) => {
    if (shouldFetchUser(getState(), id)) {
      return dispatch(fetchUser(id));
    }
  };
}

Установка и настройка

1. Установка:

npm install redux-thunk

2. Подключение к store:

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

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

Альтернативы Thunk

Для сложных сценариев можно рассмотреть:

• Redux Saga
• Redux Observable
• RTK Query (часть Redux Toolkit)

Резюмируем

1. Redux Thunk - middleware для асинхронных операций в Redux
2. Позволяет action creators возвращать функции
3. Основные применения: API calls, условный dispatch
4. Прост в настройке и использовании
5. Для простых случаев достаточно Thunk, для сложных - есть альтернативы

Thunk значительно расширяет возможности Redux, сохраняя при этом его концептуальную простоту.