Что такое createAsyncThunk и как его использовать?

Question

createAsyncThunk — это утилита из Redux Toolkit для работы с асинхронными действиями. Она помогает создавать асинхронные экшены, автоматически генерируя три состояния: ожидание, успех и ошибка. Вы описываете асинхронную функцию, а Redux Toolkit автоматически управляет состоянием загрузки и ошибок, обновляя store на основе результата выполнения действия.

YeaHub · Accepted Answer

createAsyncThunk — это функция из Redux Toolkit, предназначенная для упрощения работы с асинхронными действиями в Redux. Она автоматически создает три действия для каждого асинхронного запроса: один для начала запроса, один для успешного завершения и один для ошибки. Эти действия помогают контролировать состояние загрузки и ошибки в приложении, не требуя дополнительного кода.Как использовать createAsyncThunk:Первый аргумент — это строка, которая определяет тип действия.Второй аргумент — это асинхронная функция, которая возвращает промис или выполняет асинхронную операцию, например, запрос к API.Пример:import { createAsyncThunk } from '@reduxjs/toolkit';
const fetchData = createAsyncThunk('data/fetchData', async () => {
	const response = await fetch('/api/data');
	return response.json(); // возвращает данные
});Как работает с асинхронным состоянием: В процессе выполнения createAsyncThunk создаются автоматически три действия:pending (ожидание) — когда запрос отправлен, но еще не завершился.fulfilled (успех) — когда запрос завершен успешно.rejected (ошибка) — когда запрос завершился с ошибкой.Пример:import { createSlice } from '@reduxjs/toolkit';
const dataSlice = createSlice({
	name: 'data',
	initialState: { data: [], loading: false, error: null },
	reducers: {},
	extraReducers: (builder) => {
		builder
			.addCase(fetchData.pending, (state) => {
				state.loading = true;
				state.error = null;
			})
			.addCase(fetchData.fulfilled, (state, action) => {
				state.data = action.payload;
				state.loading = false;
			})
			.addCase(fetchData.rejected, (state, action) => {
				state.loading = false;
				state.error = action.error.message;
			});
	}
});Преимущества createAsyncThunk:Автоматически управляет состоянием загрузки и ошибок.Уменьшает количество кода, который необходимо писать вручную для обработки асинхронных операций.Упрощает управление асинхронными запросами, улучшая читаемость и поддерживаемость кода.