ローディングおよびエラー状態によるUXの改善

アプリがユーザーにとって応答性が高く、分かりやすく感じられるようにします。 データの読み込み中に何も表示しないのではなく、アプリケーションの現在の状態を表示します。

UIの更新

TaskList.jsx を開き、ストアから status と error を使用します:

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchTasks } from '../features/tasks/tasksSlice';
import TaskItem from './TaskItem';

function TaskList() {
  const dispatch = useDispatch();
  const { items, status, error } = useSelector((state) => state.tasks);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchTasks());
    }
  }, [dispatch, status]);

  if (status === 'loading') {
    return <p>Loading tasks...</p>;
  }

  if (status === 'failed') {
    return <p>Error: {error}</p>;
  }

  return (
    <ul>
      {items.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </ul>
  );
}

export default TaskList;

UIは現在の状況を反映します:

• データ取得中はローディングを表示
• データが準備できたらタスクを表示
• エラーが発生した場合はエラーメッセージを表示

ユーザーは常にフィードバックを確認できます。簡単なメッセージでも、アプリケーションがより信頼でき、使いやすく感じられます。

非同期状態をUIに接続しました。アプリケーションはローディングとエラー状態を処理し、ユーザーに明確なフィードバックを提供します。