Maison interface Web js tutoriel Boîte à outils Redux complète - Logique asynchrone avec (Partie -2)

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

Sep 10, 2024 am 11:04 AM

Complete Redux Toolkit - Async Logic with(Part -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;
Copier après la connexion

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;

Copier après la connexion

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;
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

10 Highlighters de syntaxe jQuery

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

10 tutoriels JavaScript & jQuery MVC

See all articles