Gerenciando Estados de Carregamento e Erro

O Problema

Ao trabalhar com dados assíncronos, a interface deve reagir a diferentes estados.

Manipulação de Estados

É possível utilizar os valores de status e error do store:

• Exibir indicadores de carregamento;
• Exibir dados quando disponíveis;
• Exibir erros quando houver falhas.

const { items, status, error } = useSelector((state) => state.posts);

if (status === 'loading') {
  return <p>Loading...</p>;
}

if (status === 'failed') {
  return <p>Error: {error}</p>;
}

return (
  <ul>
    {items.map((post) => (
      <li key={post.id}>{post.title}</li>
    ))}
  </ul>
);

Usuários precisam de feedback. Sem o tratamento desses estados, o aplicativo parece estar com defeito ou sem resposta.