Lataus- ja virhetilojen hallinta

Ongelma

Työskenneltäessä asynkronisen datan kanssa käyttöliittymän tulee reagoida eri tiloihin.

Tilojen käsittely

Voit käyttää storesta saatavia status- ja error-arvoja:

• Näytä latausilmaisimet;
• Näytä data, kun se on saatavilla;
• Näytä virheet, kun jokin epäonnistuu.

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

Käyttäjät tarvitsevat palautetta. Ilman näiden tilojen käsittelyä sovellus vaikuttaa rikkinäiseltä tai ei vastaa.