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

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:

• Автоматически управляет состоянием загрузки и ошибок.

• Уменьшает количество кода, который необходимо писать вручную для обработки асинхронных операций.

• Упрощает управление асинхронными запросами, улучшая читаемость и поддерживаемость кода.