Керування станами завантаження та помилок

Проблема

Під час роботи з асинхронними даними інтерфейс має реагувати на різні стани.

Обробка станів

Можна використовувати значення status та error зі стору:

• Відображення індикаторів завантаження;
• Відображення даних, коли вони доступні;
• Відображення помилок у разі невдачі.

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

Користувачам потрібен зворотний зв'язок. Без обробки цих станів застосунок здається зламаним або не реагує.