Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Managing Loading and Error States | Handling Async Logic with Redux Toolkit
State Management with Redux Toolkit in React

bookManaging 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?

How can we improve it?

Thanks for your feedback!

Section 5. Chapter 3

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Section 5. Chapter 3
some-alt