Migliorare l'UX con stati di caricamento ed errore

Ora l'app risulta reattiva e chiara per l'utente. Invece di non mostrare nulla durante il caricamento dei dati, viene visualizzato lo stato attuale dell'applicazione.

Aggiornamento dell'interfaccia utente

Apri TaskList.jsx e utilizza lo status e l'errore dallo 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;

L'interfaccia ora riflette ciò che sta accadendo:

• Mostra il caricamento mentre i dati vengono recuperati;
• Visualizza le attività quando i dati sono pronti;
• Mostra un messaggio di errore se qualcosa va storto.

L'utente riceve sempre un feedback. Anche semplici messaggi rendono l'applicazione più affidabile e facile da usare.

Stato asincrono collegato all'interfaccia utente. L'applicazione ora gestisce stati di caricamento ed errore e fornisce un feedback chiaro all'utente.