Mejorando la Experiencia de Usuario con Estados de Carga y Error

Ahora la aplicación se siente más receptiva y clara para el usuario. En lugar de no mostrar nada mientras se cargan los datos, se muestra el estado actual de la aplicación.

Actualización de la interfaz de usuario

Abre TaskList.jsx y utiliza el estado y el error del 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;

La interfaz ahora refleja lo que está sucediendo:

• Muestra "cargando" mientras se obtienen los datos;
• Muestra las tareas cuando los datos están listos;
• Muestra un mensaje de error si ocurre algún fallo.

El usuario siempre recibe retroalimentación. Incluso mensajes simples hacen que la aplicación parezca más confiable y fácil de usar.

Se conectó el estado asíncrono a la interfaz. La aplicación ahora gestiona los estados de carga y error y proporciona retroalimentación clara al usuario.