PricingLoginStart free
React Academy · Leçon

Logique asynchrone avec createAsyncThunk

Gérez les appels d’API dans Redux avec createAsyncThunk et le cycle de vie pending/fulfilled/rejected.

Leçon 2 sur 413 étapes

Logique asynchrone avec createAsyncThunk est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous apprendrez à gérer les appels d'API dans Redux avec createAsyncThunk et à traiter les actions du cycle de vie en attente, réussie et rejetée dans votre module.

Qu'est-ce que createAsyncThunk ?

createAsyncThunk génère un créateur d'actions asynchrones qui déclenche automatiquement trois actions du cycle de vie : en attente (démarrée), réussie (résolue) et rejetée (échouée). Vous traitez chacune d'elles dans extraReducers.

Définir une action asynchrone

Appelez createAsyncThunk avec une chaîne de caractères représentant le type et une fonction asynchrone qui crée la charge utile. Renvoyez les données que vous souhaitez utiliser comme charge utile de l'action réussie.
import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId) => {
    const response = await fetch('/api/users/' + userId);
    return response.json(); // becomes action.payload on fulfilled
  }
);

Gérer les actions dans extraReducers

Ajoutez des cas pour les trois états du cycle de vie dans les extraReducers du module. Gérez l'état du chargement, des données et des erreurs en conséquence.
extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => {
      state.loading = true;
      state.error = null;
    })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    })
    .addCase(fetchUser.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
}

Déclencher l'action asynchrone

Déclenchez l'action asynchrone depuis un composant avec useDispatch. Transmettez directement les arguments au créateur d'action asynchrone.
const dispatch = useDispatch();
useEffect(() => {
  dispatch(fetchUser(userId));
}, [userId]);

Accéder à l'état dans l'action asynchrone

La fonction qui crée la charge utile reçoit un objet thunkAPI comme deuxième argument. Utilisez thunkAPI.getState() pour lire l'état Redux actuel et thunkAPI.dispatch() pour déclencher d'autres actions.
export const saveItem = createAsyncThunk(
  'items/save',
  async (item, { getState }) => {
    const { auth } = getState();
    return fetch('/api/items', {
      method: 'POST',
      headers: { Authorization: 'Bearer ' + auth.token },
      body: JSON.stringify(item),
    }).then(r => r.json());
  }
);

Gérer les erreurs avec rejectWithValue

Pour transmettre une charge utile d'erreur personnalisée au cas rejeté, utilisez thunkAPI.rejectWithValue(). La propriété action.payload de l'action rejetée contiendra votre objet d'erreur personnalisé.
export const fetchData = createAsyncThunk(
  'data/fetch',
  async (id, { rejectWithValue }) => {
    const res = await fetch('/api/' + id);
    if (!res.ok) return rejectWithValue({ status: res.status });
    return res.json();
  }
);
// In rejected case: action.payload.status is available

Annuler des actions asynchrones

Transmettez un signal AbortController à votre requête fetch dans l'action asynchrone. createAsyncThunk fournit automatiquement ce signal via thunkAPI.signal lorsque l'action asynchrone est annulée avec dispatch.abort().
async (id, { signal }) => {
  const res = await fetch('/api/' + id, { signal });
  return res.json();
}

Attendre une action asynchrone déclenchée

L'appel dispatch() d'une action asynchrone renvoie une promesse. Vous pouvez l'attendre pour savoir quand le traitement asynchrone est terminé, ce qui est utile pour les scénarios de redirection après enregistrement.
const result = await dispatch(saveItem(data));
if (saveItem.fulfilled.match(result)) {
  navigate('/success');
}

Notation avec générateur ou notation objet

Utilisez le modèle de rappel builder.addCase dans extraReducers — il est sûr du point de vue des types et pris en charge. L'ancienne notation par clés d'objet est obsolète dans les versions récentes de RTK.

Vérification rapide

Que se passe-t-il lorsque la fonction asynchrone dans createAsyncThunk lève une erreur ?
Réponds-y dans la leçon interactive

Récapitulatif

createAsyncThunk génère automatiquement les actions en attente, réussie et rejetée. Gérez les trois dans extraReducers. Utilisez rejectWithValue pour les charges utiles d'erreur personnalisées et thunkAPI.getState() pour accéder à l'état actuel dans les actions asynchrones.

Suite du cours

Leçon suivante : **RTK Query : points de terminaison et mise en cache automatique** — vous définirez des points de terminaison d'API avec createApi et laisserez RTK Query gérer automatiquement la mise en cache.
Gratuit pour commencer

Apprends React avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
88
Leçons
324
Commencer gratuitementVoir le cours complet

Questions Fréquemment Posées

La leçon « Logique asynchrone avec createAsyncThunk » est-elle gratuite ?

Oui — le texte complet de « Logique asynchrone avec createAsyncThunk » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Logique asynchrone avec createAsyncThunk » ?

Gérez les appels d’API dans Redux avec createAsyncThunk et le cycle de vie pending/fulfilled/rejected. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Logique asynchrone avec createAsyncThunk » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Parties Redux Toolkit et createSlice
  2. Logique asynchrone avec createAsyncThunk
  3. RTK Query : points d’accès et mise en cache automatique
  4. Mises à jour optimistes et invalidation du cache
← Retour à React Academy