Le problème

Lors de la gestion de données asynchrones, l'interface utilisateur doit réagir à différents états.

Gestion des états

Utilisation des valeurs de statut et d’erreur depuis le store :

• Affichage des indicateurs de chargement ;
• Affichage des données lorsqu'elles sont disponibles ;
• Affichage des erreurs en cas d'échec.

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>
);

Les utilisateurs ont besoin de retours visuels. Sans gestion de ces états, l’application semble défaillante ou non réactive.