Различия

Показаны различия между двумя версиями страницы.

--- createasyncthunk_-_asinxronni_zapiti_v_redux_toolkit [2024/04/18 16:45]
tro создано
+++ createasyncthunk_-_asinxronni_zapiti_v_redux_toolkit [2024/04/25 17:18] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== createAsyncThunk - асинхронні запити в Redux Toolkit ======
 Redux Toolkit спрощує процес оголошення асинхронного генератора екшену за допомогою функції createAsyncThunk(). Першим аргументом вона приймає тип екшену, а другим функцію, яка повинна виконати HTTP-запит і повернути проміс із даними, які стануть значенням payload. Вона повертає асинхронний генератор екшену (операцію) при запуску якого виконається функція з кодом запиту.
+<code>
+// 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;
+});
+</code>
+<code>
+// 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;
+</code>