Hantering av laddnings- och felstatus

Problemet

Vid arbete med asynkron data måste användargränssnittet reagera på olika tillstånd.

Hantering av tillstånd

Status- och felvärden från butiken kan användas:

• Visa laddningsindikatorer;
• Visa data när de är tillgängliga;
• Visa fel när något misslyckas.

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

Användare behöver återkoppling. Utan hantering av dessa tillstånd känns appen trasig eller oresponsiv.