Förbättra UX med laddnings- och felhanteringstillstånd

Nu gör du appen responsiv och tydlig för användaren. Istället för att visa ingenting medan data laddas, visar du applikationens aktuella tillstånd.

Uppdatera användargränssnittet

Öppna TaskList.jsx och använd status och felmeddelande från store:

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;

Användargränssnittet återspeglar nu vad som händer:

• Visar laddning medan data hämtas;
• Visar uppgifter när data är klar;
• Visar ett felmeddelande om något misslyckas.

Användare får alltid återkoppling. Även enkla meddelanden gör applikationen mer pålitlig och lättare att använda.

Du har kopplat asynkront tillstånd till användargränssnittet. Applikationen hanterar nu laddnings- och felmeddelanden och ger tydlig återkoppling till användaren.