Nå får du appen til å føles responsiv og tydelig for brukeren. I stedet for å vise ingenting mens data lastes inn, viser du den nåværende tilstanden til applikasjonen.

Oppdatere brukergrensesnittet

Åpne TaskList.jsx og bruk status og error 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;

Brukergrensesnittet gjenspeiler nå hva som skjer:

• Viser lasting mens data hentes;
• Viser oppgaver når data er klar;
• Viser en feilmelding hvis noe går galt.

Brukere får alltid tilbakemelding. Selv enkle meldinger gjør applikasjonen mer pålitelig og enklere å bruke.

Du har koblet asynkron tilstand til brukergrensesnittet. Applikasjonen håndterer nå lasting og feiltilstander og gir tydelig tilbakemelding til brukeren.