Зачем нужен redux-funk?

Зачем нужен redux-thunk?

redux-thunk — это middleware для Redux, которое позволяет обрабатывать асинхронные операции (API запросы, таймауты) внутри action creators. Без него Redux может работать только с синхронными действиями.

Проблема без redux-thunk

Redux работает по простой схеме:

// Action creator возвращает объект
function loadUsers() {
  return { type: "LOAD_USERS", payload: data };
}

Если нужно получить данные с сервера, приходится делать это в компоненте:

// Komponente.jsx (плохой подход)
function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return <div>{users.map(u => <p>{u.name}</p>)}</div>;
}

Проблемы:

• Логика запросов размазана по компонентам
• Сложно переиспользовать
• Redux store не отражает полное состояние
• Тестирование затруднено

Решение: redux-thunk

redux-thunk позволяет action creator'ам возвращать функцию:

function loadUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "LOAD_USERS_START" });

    try {
      const response = await fetch("/api/users");
      const data = await response.json();
      dispatch({ type: "LOAD_USERS_SUCCESS", payload: data });
    } catch (error) {
      dispatch({ type: "LOAD_USERS_ERROR", payload: error.message });
    }
  };
}

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

1. Компонент вызывает: dispatch(loadUsers())
2. Redux видит, что action — функция, а не объект
3. redux-thunk перехватывает и вызывает функцию с (dispatch, getState)
4. Функция выполняет асинхронный запрос
5. По завершении отправляет одно или несколько действий
6. Redux обновляет store

Использование в компоненте

function UserList() {
  const dispatch = useDispatch();
  const users = useSelector(state => state.users.data);
  const loading = useSelector(state => state.users.loading);
  const error = useSelector(state => state.users.error);

  useEffect(() => {
    dispatch(loadUsers());
  }, [dispatch]);

  if (loading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error}</p>;

  return <div>{users.map(u => <p>{u.name}</p>)}</div>;
}

Регистрация redux-thunk

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

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

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

• Redux Saga — более мощный, использует generators
• Redux Observable — использует RxJS
• RTK Query — встроенное решение в Redux Toolkit

Когда использовать

• API запросы
• Таймауты и отложенные действия
• Цепочки асинхронных операций
• Получение данных из store перед запросом

redux-thunk — простой способ управлять асинхронностью в Redux.