Laden en Foutstatussen Beheren

Het probleem

Bij het werken met asynchrone data moet de UI reageren op verschillende toestanden.

Toestanden afhandelen

Je kunt de status- en foutwaarden uit de store gebruiken:

• Laadindicatoren tonen;
• Data tonen wanneer beschikbaar;
• Fouten tonen wanneer er iets misgaat.

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

Gebruikers hebben feedback nodig. Zonder het afhandelen van deze toestanden voelt de app kapot of niet responsief aan.