Improving UX with Loading and Error States

Now you make the app feel responsive and clear for the user. Instead of showing nothing while data loads, you display the current state of the application.

Updating the UI

Open TaskList.jsx and use the status and error from the store:

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;

The UI now reflects what is happening:

• Shows loading while data is being fetched;
• Displays tasks when data is ready;
• Shows an error message if something fails.

Users always see feedback. Even simple messages make the application feel more reliable and easier to use.

You connected async state to the UI. The application now handles loading and error states and provides clear feedback to the user.