Managing Loading and Error States
Swipe to show menu
The Problem
When working with async data, the UI must react to different states.
Handling States
You can use the status and error values from the store:
- Show loading indicators;
- Show data when available;
- Show errors when something fails.
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>
);
Users need feedback. Without handling these states, the app feels broken or unresponsive.
Everything was clear?
Thanks for your feedback!
Section 5. Chapter 3
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Section 5. Chapter 3