Das Problem

Beim Arbeiten mit asynchronen Daten muss die Benutzeroberfläche auf verschiedene Zustände reagieren.

Zustandsverwaltung

Die Status- und Fehlerwerte aus dem Store können verwendet werden:

• Anzeige von Ladeindikatoren;
• Anzeige von Daten, sobald sie verfügbar sind;
• Anzeige von Fehlern, wenn etwas fehlschlägt.

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

Nutzer benötigen Rückmeldungen. Ohne die Behandlung dieser Zustände wirkt die Anwendung fehlerhaft oder nicht reagierend.