Het Verbeteren van de UX met Laad- en Foutstatussen

De applicatie voelt nu responsief en duidelijk aan voor de gebruiker. In plaats van niets te tonen tijdens het laden van gegevens, wordt de huidige status van de applicatie weergegeven.

De UI bijwerken

Open TaskList.jsx en gebruik de status en foutmelding uit de 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;

De UI geeft nu weer wat er gebeurt:

• Toont laden terwijl gegevens worden opgehaald;
• Geeft taken weer wanneer de gegevens beschikbaar zijn;
• Toont een foutmelding als er iets misgaat.

Gebruikers krijgen altijd feedback. Zelfs eenvoudige meldingen maken de applicatie betrouwbaarder en gebruiksvriendelijker.

De asynchrone status is gekoppeld aan de UI. De applicatie verwerkt nu laad- en foutstatussen en geeft duidelijke feedback aan de gebruiker.