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

bookManaging Loading and Error States

メニューを表示するにはスワイプしてください

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.

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 5.  3

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 5.  3
some-alt