Обробка асинхронних даних у додатку

Тепер додаються дані, що надходять ззовні додатка. Замість початку з порожнього списку, завантаження завдань відбувається з API.

Створення асинхронної дії

Оновлення зрізу та додавання createAsyncThunk:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchTasks = createAsyncThunk('tasks/fetchTasks', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=5');

  if (!response.ok) {
    throw new Error('Failed to fetch tasks');
  }

  return response.json();
});

Обробка асинхронних станів

Оновлення зрізу для відстеження стану завантаження та помилок:

const initialState = {
  items: [],
  status: 'idle',
  error: null
};

Додайте extraReducers:

extraReducers: (builder) => {
  builder
    .addCase(fetchTasks.pending, (state) => {
      state.status = 'loading';
    })
    .addCase(fetchTasks.fulfilled, (state, action) => {
      state.status = 'succeeded';
      state.items = action.payload;
    })
    .addCase(fetchTasks.rejected, (state, action) => {
      state.status = 'failed';
      state.error = action.error.message;
    });
}

Виклик отримання даних

Відправлення дії при завантаженні компонента:

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchTasks } from '../features/tasks/tasksSlice';

function TaskList() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchTasks());
  }, [dispatch]);
}

Ви додали асинхронну логіку до застосунку. Завдання тепер завантажуються з API, а стан відстежує статуси завантаження, успіху та помилки.