Весной стартует сезон найма, успей отхватить свой оффер!

Redux Thunk

Redux Thunk — это middleware для Redux, который позволяет работать с асинхронными действиями. Thunk позволяет действиям возвращать функции вместо простых объектов, что делает возможным отложенное выполнение dispatch.

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

Thunk позволяет action creator возвращать функцию вместо объекта действия. Эта функция может:

  • Выполнять асинхронные операции
  • Получать доступ к состоянию store через getState
  • Отправлять другие действия через dispatch

Пример использования Redux Thunk

// Без Thunk (синхронное действие)
const increment = () => ({
  type: 'INCREMENT'
});

// С Thunk (асинхронное действие)
const incrementAsync = () => {
  return (dispatch) => {
    dispatch({ type: 'INCREMENT_REQUEST' });
    
    setTimeout(() => {
      dispatch({ type: 'INCREMENT_SUCCESS' });
    }, 1000);
  };
};

// Пример с API запросом
const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    try {
      dispatch({ type: 'FETCH_USER_REQUEST' });
      
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      
      dispatch({ 
        type: 'FETCH_USER_SUCCESS',
        payload: data
      });
    } catch (error) {
      dispatch({ 
        type: 'FETCH_USER_ERROR',
        error: error.message
      });
    }
  };
};

Подключение Redux Thunk

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

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

Преимущества Redux Thunk:

Redux Thunk особенно полезен для обработки API запросов и других асинхронных операций в Redux приложениях.