Boîte à outils Redux complète - Logique asynchrone avec (Partie -2)

1. Introduction à la logique asynchrone dans Redux Toolkit

La gestion de la logique asynchrone dans Redux implique souvent beaucoup de code passe-partout, comme la création de types d'action, de créateurs d'actions et de réducteurs pour gérer différents états (chargement, succès, erreur). Redux Toolkit simplifie cela avec createAsyncThunk, qui vous permet de définir un "thunk" pour les opérations asynchrones avec une configuration minimale.

createAsyncThunk :

• Génère automatiquement les types d'actions en attente, exécutées et rejetées.
• Facilite la gestion des effets secondaires tels que les requêtes API.
• S'intègre parfaitement aux tranches créées à l'aide de createSlice.

2. Utilisation de createAsyncThunk pour les appels API

Examinons la création d'un thunk asynchrone pour récupérer des données à partir d'une API publique et gérer différents états de chargement.

Étape 1 : Configuration d'un service API simple
Nous utiliserons une API publique gratuite pour illustrer cet exemple. Supposons que nous ayons un point de terminaison API qui renvoie une liste de publications.

Étape 2 : Créer un Thunk asynchrone
Tout d’abord, créez un nouveau fichier slice nommé postsSlice.js dans le répertoire feature/posts. Nous utiliserons createAsyncThunk pour récupérer les publications de manière asynchrone.

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

Explication :

createAsyncThunk : Cette fonction prend deux arguments : un type d'action de chaîne et une fonction asynchrone. La fonction asynchrone est l'endroit où l'appel API se produit. Lorsque la promesse est résolue, les données sont renvoyées et automatiquement distribuées en tant que charge utile de l'action exécutée.

extraReducers : Ceci est utilisé pour gérer les actions générées par createAsyncThunk. Nous gérons trois états : en attente, exécuté et rejeté.

3. Intégration de Thunks dans les composants

Maintenant, utilisons le thunk fetchPosts dans un composant React et affichons les données.

Étape 1 : Créer un composant PostsList
Créez un composant PostsList.js dans le répertoire feature/posts :

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = <p>Loading...</p>;
  } else if (status === 'succeeded') {
    content = (
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    );
  } else if (status === 'failed') {
    content = <p>{error}</p>;
  }

  return (
    <section>
      <h2>Posts</h2>
      {content}
    </section>
  );
};

export default PostsList;

Explication :

Le hook useEffect distribue fetchPosts lorsque le composant est monté, mais uniquement si l'état actuel est « inactif ».
Le statut est vérifié pour déterminer le contenu à afficher (spinner de chargement, liste de publications ou message d'erreur).

Étape 2 : Ajouter une liste de publications à l'application

Mettez à jour le fichier App.js principal pour inclure le composant PostsList :

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    <div className="App">
      <PostsList />
    </div>
  );
}

export default App;

4. Meilleures pratiques pour les Thunks asynchrones

Évitez la logique lourde dans les composants : gardez les composants propres en répartissant les tâches pour gérer la logique asynchrone.
Centralisez la gestion des erreurs : gérez les erreurs dans votre tranche plutôt que de répéter la logique dans chaque composant.
Normaliser les données : envisagez de normaliser la forme de l'état à l'aide de bibliothèques telles que normalizr pour gérer efficacement les structures de données complexes.
Mémoriser les sélecteurs : utilisez createSelector from reselect pour mémoriser les sélecteurs pour de meilleures performances.

5. Conclusion et prochaines étapes
Dans cette partie, nous avons exploré comment gérer la logique asynchrone dans Redux Toolkit à l'aide de createAsyncThunk. Nous avons appris à créer un thunk asynchrone, à gérer différents états et à l'utiliser dans un composant. Dans la partie suivante, nous aborderons RTK Query, un outil puissant de récupération et de mise en cache de données qui simplifie encore le développement de Redux.

_
Restez à l'écoute pour la partie 3 : Introduction à la requête RTK !_

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!