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;