Summary  
This chapter demonstrates how to create and handle asynchronous actions in Redux Toolkit using createAsyncThunk, update slice state for loading, success, and error, and dispatch the async fetch action in a component.  

General domain of usage  
Task management applications

Vous allez maintenant ajouter des données provenant de l'extérieur de l'application. Au lieu de commencer avec une liste vide, vous allez charger les tâches depuis une API.





## Création de l'action asynchrone

Mettez à jour votre slice et ajoutez `createAsyncThunk` :

```javascript
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchTasks = createAsyncThunk('tasks/fetchTasks', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=5');

  if (!response.ok) {
    throw new Error('Failed to fetch tasks');
  }

  return response.json();
});
```





## Gestion des états asynchrones

Mettez à jour votre slice pour suivre le chargement et les erreurs :

```javascript
const initialState = {
  items: [],
  status: 'idle',
  error: null
};
```



Ajouter `extraReducers` :

```javascript
extraReducers: (builder) => {
  builder
    .addCase(fetchTasks.pending, (state) => {
      state.status = 'loading';
    })
    .addCase(fetchTasks.fulfilled, (state, action) => {
      state.status = 'succeeded';
      state.items = action.payload;
    })
    .addCase(fetchTasks.rejected, (state, action) => {
      state.status = 'failed';
      state.error = action.error.message;
    });
}
```





## Déclenchement de la récupération

Déclenchement de l'action lors du chargement du composant :

```javascript
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchTasks } from '../features/tasks/tasksSlice';

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

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







Une logique asynchrone a été ajoutée à l'application. Les tâches sont désormais chargées depuis une API, et l'état suit les statuts de chargement, de succès et d'erreur.


Apprenez à gérer l'état complexe d'une application React en utilisant Redux Toolkit. Comprenez quand Redux est réellement nécessaire, construisez l'état avec des slices, gérez les données asynchrones et connectez tous les éléments dans un flux prévisible.

Comprendre pourquoi Redux Toolkit existe et à quel moment il devient utile. Reconnaître comment la complexité de l'état augmente dans les applications réelles et pourquoi les approches simples cessent d'être adaptées à l'échelle.

Installer Redux Toolkit et configurer le store. Connecter Redux à une application React et comprendre le flux de données dans le système.

Définir l'état à l'aide des slices et organiser la logique de manière claire. Créer des reducers, utiliser les actions générées et maintenir un état gérable à mesure que l'application évolue.

Lire les données du store en utilisant useSelector et les mettre à jour avec useDispatch. Structurer correctement l'état et éviter les erreurs courantes lors de la gestion des données partagées.

Récupération de données depuis des API à l'aide de createAsyncThunk. Gestion des états de chargement et d'erreur et maintien de la synchronisation de l'interface utilisateur avec les mises à jour asynchrones.

Diviser l'état en plusieurs slices et organiser les fichiers par fonctionnalité. Combiner les reducers de manière propre et maintenir une structure claire à mesure que l'application se développe.

Créer une application complète en utilisant Redux Toolkit. Implémentation des fonctionnalités CRUD, gestion des données asynchrones et amélioration de l'expérience utilisateur avec des états de chargement et d'erreur.

Gestion des Données Asynchrones dans l'Application

Création de l'action asynchrone

Gestion des états asynchrones

Déclenchement de la récupération