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.


Entdecken Sie die Leistungsfähigkeit von Redux Toolkit in Verbindung mit React und verbessern Sie Ihre Fähigkeiten im Bereich State Management. Dieser Kurs bietet eine umfassende Einführung in Redux Toolkit, eine leistungsstarke Bibliothek zur Verwaltung von Zustand. Lernen Sie, wie Sie Ihre Redux-Konfiguration optimieren, komplexe Zustandslogik vereinfachen und effiziente, skalierbare React-Anwendungen erstellen.

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