createAsyncThunk - асинхронні запити в Redux Toolkit

Redux Toolkit спрощує процес оголошення асинхронного генератора екшену за допомогою функції createAsyncThunk(). Першим аргументом вона приймає тип екшену, а другим функцію, яка повинна виконати HTTP-запит і повернути проміс із даними, які стануть значенням payload. Вона повертає асинхронний генератор екшену (операцію) при запуску якого виконається функція з кодом запиту.

// src/redux/operations.js
import axios from "axios";
import { createAsyncThunk } from "@reduxjs/toolkit";
axios.defaults.baseURL = "https://62584f320c918296a49543e7.mockapi.io";
export const fetchTasks = createAsyncThunk("tasks/fetchAll", async () => {
const response = await axios.get("/tasks");
return response.data;
});

// src/redux/tasksSlice.js
import { createSlice } from "@reduxjs/toolkit";
// Імпортуємо операцію
import { fetchTasks } from "./operations";
const tasksSlice = createSlice({
name: "tasks",
initialState: {
items: [],
isLoading: false,
error: null,
},
// Додаємо обробку зовнішніх екшенів
extraReducers: builder => {
builder
.addCase(fetchTasks.pending, (state, action) => {тут код обробки стейтів})
.addCase(fetchTasks.fulfilled, (state, action) => {})
.addCase(fetchTasks.rejected, (state, action) => {});
},
});
export const tasksReducer = tasksSlice.reducer;