Forbedring af Brugeroplevelsen med Indlæsnings- og Fejltilstande

Nu får du appen til at føles responsiv og tydelig for brugeren. I stedet for at vise ingenting, mens data indlæses, vises den aktuelle tilstand af applikationen.

Opdatering af brugergrænsefladen

Åbn TaskList.jsx og brug status og fejl fra 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;

Brugergrænsefladen afspejler nu, hvad der sker:

• Viser indlæsning, mens data hentes;
• Viser opgaver, når data er klar;
• Viser en fejlmeddelelse, hvis noget fejler.

Brugere ser altid feedback. Selv enkle beskeder gør applikationen mere pålidelig og nemmere at bruge.

Du har forbundet asynkron tilstand til brugergrænsefladen. Applikationen håndterer nu indlæsnings- og fejltilstande og giver tydelig feedback til brugeren.