Melhorando a Experiência do Usuário com Estados de Carregamento e Erro

Agora o aplicativo transmite uma sensação de responsividade e clareza para o usuário. Em vez de não exibir nada enquanto os dados são carregados, o estado atual da aplicação é mostrado.

Atualizando a Interface

Abra TaskList.jsx e utilize o status e o erro do 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;

A interface agora reflete o que está acontecendo:

• Exibe carregamento enquanto os dados estão sendo buscados;
• Mostra as tarefas quando os dados estão prontos;
• Exibe uma mensagem de erro se algo falhar.

Os usuários sempre recebem um retorno visual. Mesmo mensagens simples tornam a aplicação mais confiável e fácil de usar.

O estado assíncrono foi conectado à interface. A aplicação agora lida com estados de carregamento e erro, fornecendo feedback claro ao usuário.