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;