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

Оновлення інтерфейсу користувача

Відкрийте TaskList.jsx і використайте статус та помилку зі стору:

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

function TaskList() {
  const dispatch = useDispatch();
  const { items, status, error } = useSelector((state) => state.tasks);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchTasks());
    }
  }, [dispatch, status]);

  if (status === 'loading') {
    return <p>Loading tasks...</p>;
  }

  if (status === 'failed') {
    return <p>Error: {error}</p>;
  }

  return (
    <ul>
      {items.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </ul>
  );
}

export default TaskList;

Інтерфейс тепер відображає поточний стан:

• Показує завантаження під час отримання даних;
• Відображає завдання, коли дані готові;
• Показує повідомлення про помилку, якщо щось не вдалося.

Користувачі завжди отримують зворотний зв'язок. Навіть прості повідомлення роблять застосунок більш надійним і зручним у використанні.

Асинхронний стан підключено до інтерфейсу. Додаток тепер обробляє стани завантаження та помилки й надає чіткий зворотний зв'язок користувачу.