Summary  
This chapter covers managing asynchronous state in a UI component by conditionally rendering loading, error, or data views based on Redux state.

General domain of usage  
front-end web applications


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:

```javascript
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.


Learn how to manage complex application state in React using Redux Toolkit. Understand when Redux is actually needed, build state with slices, handle async data, and connect everything into a predictable flow. 

Understand why Redux Toolkit exists and when it becomes useful. Recognize how state complexity grows in real applications and why simple approaches stop scaling.

Install Redux Toolkit and set up the store. Connect Redux to a React application and understand how data flows through the system.

Define state using slices and organize logic clearly. Create reducers, use generated actions, and keep state manageable as the application grows.

Read data from the store using useSelector and update it with useDispatch. Structure state correctly and avoid common mistakes when working with shared data.

Fetch data from APIs using createAsyncThunk. Manage loading and error states and keep the UI in sync with async updates.

Split state into multiple slices and organize files by feature. Combine reducers cleanly and maintain a clear structure as the application grows.

Build a complete application using Redux Toolkit. Implement CRUD features, handle async data, and improve the user experience with loading and error states.

Improving UX with Loading and Error States

Updating the UI