Summary  
This chapter covers how to dispatch asynchronous actions when a component loads and keep the UI in sync by automatically updating it based on loading, success, and error states.

General domain of usage  
Front-end user interfaces

## What You Are Building

Now you connect async state to the UI.





## Triggering the Fetch

Dispatch the async action when the component loads:

```javascript
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchPosts } from './postsThunk';

function Posts() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);
}
```



## Keeping UI in Sync

Once the action is dispatched:

* Redux updates the state;
* Components re-render automatically;
* UI reflects the latest data.





## The Result

Your UI now responds to real data:

* Shows loading;
* Displays results;
* Handles errors.


Scopri la potenza di Redux Toolkit in combinazione con React e potenzia le tue competenze nella gestione dello stato. Questo corso introduce in modo completo Redux Toolkit, una potente libreria per la gestione dello stato. Impara a semplificare la configurazione di Redux, a rendere più semplice la logica di stato complessa e a creare applicazioni React efficienti e scalabili.

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.

Updating UI Based on Async Results

What You Are Building

Triggering the Fetch

Keeping UI in Sync

The Result