Verbesserung der Benutzererfahrung mit Lade- und Fehlerzuständen

Die Anwendung wirkt jetzt reaktionsschnell und verständlich für den Benutzer. Anstatt während des Ladens der Daten nichts anzuzeigen, wird der aktuelle Zustand der Anwendung dargestellt.

Aktualisierung der Benutzeroberfläche

Öffne TaskList.jsx und verwende den Status und Fehler aus dem 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;

Die Benutzeroberfläche spiegelt nun den aktuellen Vorgang wider:

• Anzeige eines Ladehinweises, während Daten abgerufen werden;
• Darstellung der Aufgaben, sobald die Daten bereitstehen;
• Anzeige einer Fehlermeldung, falls ein Fehler auftritt.

Benutzer erhalten stets eine Rückmeldung. Selbst einfache Nachrichten machen die Anwendung zuverlässiger und benutzerfreundlicher.

Die asynchronen Zustände wurden mit der Benutzeroberfläche verbunden. Die Anwendung verarbeitet jetzt Lade- und Fehlerzustände und bietet dem Benutzer eine klare Rückmeldung.