Как вы используете redux-thunk для работы с асинхронными действиями?

Question

redux-thunk — это middleware, которое позволяет отправлять функции вместо объектов в Redux. Такие функции могут выполнять асинхронный код, например, запросы к API, а затем отправлять обычные действия с результатами этих операций. Это полезно для управления состоянием, зависящим от внешних данных.

YeaHub · Accepted Answer

По умолчанию Redux работает только с синхронными действиями, которые являются обычными объектами. Однако в реальных приложениях часто нужно выполнять асинхронные операции, такие как запросы к серверу. Для этого используется redux-thunk.Как работает redux-thunk?redux-thunk перехватывает действия, отправленные через dispatch.Если действие — это функция, middleware вызывает эту функцию, передавая в нее dispatch и getState как аргументы.Внутри этой функции можно выполнять асинхронные операции и отправлять обычные действия.Установка:npm install redux-thunkПодключение:import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// Простой редьюсер
const reducer = (state = { data: null }, action) => {
	switch (action.type) {
		case 'SET_DATA':
			return { ...state, data: action.payload };
		default:
			return state;
	}
};
// Хранилище с подключением redux-thunk
const store = createStore(reducer, applyMiddleware(thunk));Создаем функцию-действие:const fetchData = () => {
	return async (dispatch) => {
		dispatch({ type: 'FETCH_START' });
		try {
			const response = await fetch('https://api.example.com/data');
			const data = await response.json();
			dispatch({ type: 'SET_DATA', payload: data });
		} catch (error) {
			dispatch({ type: 'FETCH_ERROR', error });
		}
	};
};Отправляем это действие:store.dispatch(fetchData());Редьюсер обрабатывает обычные действия:const reducer = (state = { loading: false, data: null, error: null }, action) => {
	switch (action.type) {
		case 'FETCH_START':
			return { ...state, loading: true, error: null };
		case 'SET_DATA':
			return { ...state, loading: false, data: action.payload };
		case 'FETCH_ERROR':
			return { ...state, loading: false, error: action.error };
		default:
			return state;
	}
};Использование redux-thunk позволяет эффективно управлять асинхронными процессами, делая код более организованным и предсказуемым. Это особенно важно в приложениях, где состояние зависит от внешних источников данных.