Redux Toolkit Query peut simplifier une grande partie de votre travail de gestion de données. Découvrez comment.

React est une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur pour les applications Web. Lors de la création d'une application, il est important d'envisager une approche de gestion des données efficace pour vous assurer que vous récupérez et restituez les données dans le navigateur de manière appropriée, en réponse aux interactions de l'utilisateur.

Cependant, la gestion de ce processus peut apparemment devenir une tâche fastidieuse et sujette aux erreurs, en particulier si vous récupérez des données à partir de plusieurs sources et que vous devez constamment mettre à jour un certain nombre d'états. Dans de tels cas, Redux Toolkit Query fournit une solution efficace.

Requête de la boîte à outils Redux (RTK Query) est un outil de récupération de données construit au-dessus de la boîte à outils Redux. Sa documentation officielle décrit RTK Query comme "un puissant outil de récupération et de mise en cache des données conçu pour simplifier cas courants de chargement de données dans une application Web, éliminant le besoin d'écrire à la main la logique de récupération et de mise en cache des données toi-même".

instagram viewer

Essentiellement, il fournit un ensemble de fonctionnalités et de capacités qui rationalisent le processus de récupération et de gestion des données à partir d'API ou de toute autre source de données à partir d'une application React.

Bien qu'il existe des similitudes entre Redux Toolkit Query et React Query, l'un des principaux avantages de Redux Toolkit Query est son intégration transparente avec Redux, une bibliothèque de gestion d'état, permettant une solution complète de récupération de données et de gestion d'état pour les applications React lorsqu'elles sont utilisées ensemble.

Certaines des fonctionnalités principales de RTK incluent la mise en cache des données, une fonctionnalité de gestion des requêtes et la gestion des erreurs.

Pour commencer, vous pouvez lancer rapidement un projet React localement en utilisant le Créer une application React commande.

mkdir React-RTQ
cd React-RTQ
npx créer-réagir-app réagir-rtq-exemple
cd réagir-rtq-exemple 
début npm

Alternativement, vous pouvez mettre en place un projet React avec Vite, un nouvel outil de création et serveur de développement pour les applications Web.

Vous pouvez trouver le code de ce projet dans ce Référentiel GitHub.

Installer les dépendances requises

Une fois que votre projet React est opérationnel, continuez et installez les packages suivants.

npm installer @reduxjs/toolkit réagir-redux

Définir une tranche d'API

Une tranche d'API est un composant qui inclut la logique Redux nécessaire pour s'intégrer et interagir avec des points de terminaison d'API spécifiés. Il fournit un moyen standardisé de définir à la fois les points de terminaison de requête pour extraire les données et les points de terminaison de mutation pour modifier les données.

Essentiellement, une tranche d'API vous permet de définir les points de terminaison pour demander et apporter des modifications aux données à partir d'une source particulière, offrant une approche rationalisée de l'intégration avec les API.

Dans le src répertoire, créez un nouveau dossier et nommez-le, caractéristiques. Dans ce dossier, créez un nouveau fichier: apiSlice.js, et ajoutez le code ci-dessous :

importer { createApi, fetchBaseQuery } depuis"@reduxjs/toolkit/query/react";
exporterconstante produitsApi = createApi({
 chemin du réducteur: "produitsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),


 points de terminaison: (constructeur) => ({
 getAllProducts: builder.query({
 mettre en doute: () =>"des produits",
 }),
 getProduct: constructeur.query({
 mettre en doute: (produit) =>`produits/recherche? q=${produit}`, 
 }),
 }),
});
exporterconstante { useGetAllProductsQuery, useGetProductQuery } = productsApi ;

Ce code définit une tranche d'API appelée produitsApi en utilisant Redux Toolkit créerApi fonction. La tranche d'API intègre les propriétés suivantes :

  • UN cheminréducteur propriété - définit le nom du réducteur dans le magasin Redux.
  • Le baseQuery propriété - spécifie l'URL de base pour toutes les demandes d'API utilisant la propriété fetchBaseQuery fonction fournie par Redux Toolkit.
  • API terminaux - spécifiez les points de terminaison disponibles pour cette tranche d'API à l'aide de la constructeur objet. Dans ce cas, le code définit deux points de terminaison.

Enfin, deux crochets sont générés à partir du produitsAPI objet qui identifie les deux extrémités. Vous pouvez utiliser ces hooks dans divers composants React pour effectuer des requêtes API, récupérer des données et modifier l'état en réponse à l'interaction de l'utilisateur.

Cette approche rationalise la gestion de l'état et la récupération des données dans l'application React.

Configurer le magasin Redux

Après avoir récupéré les données de l'API, RTK Query met en cache les données dans le magasin Redux. Le magasin, dans ce cas, sert de hub central pour gérer l'état des requêtes API faites à partir de React application, y compris les données récupérées à partir de ces demandes d'API garantissant que les composants accèdent et mettent à jour ces données au fur et à mesure nécessaire.

Dans le répertoire src, créez un store.js fichier et ajoutez les lignes de code suivantes :

importer { configureStore } depuis"@reduxjs/boîte à outils";
importer { produitsApi } depuis"./features/apiSlice";
exporterconstante store = configureStore({
 réducteur: {
 [productsApi.reducerPath]: produitsApi.reducer,
 },
 intergiciel: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Ce code crée un nouveau magasin Redux, avec deux principaux éléments de configuration :

  1. Réducteur: Cela définit comment le magasin doit gérer les mises à jour de l'état. Dans ce cas, le produitsApi.reducer est transmis en tant que fonction reducer et reçoit une clé reducerPath unique pour l'identifier dans l'état général du magasin.
  2. Intergiciel: Cela définit tout middleware supplémentaire qui devrait s'appliquer au magasin.

La résultante magasin L'objet est un magasin Redux entièrement configuré, qui peut être utilisé pour gérer l'état de l'application.

En configurant le magasin de cette manière, l'application peut facilement gérer l'état des requêtes API et traiter leurs résultats de manière standardisée à l'aide du Redux Toolkit.

Créer un composant pour implémenter la fonctionnalité RTK

Dans le répertoire src, créez un nouveau Composants dossier avec un nouveau fichier à l'intérieur: Data.js.

Ajoutez ce code au fichier Data.js :

importer { useGetAllProductsQuery } depuis"../fonctionnalités/apiSlice";
importer Réagissez, { useState } depuis"réagir";
importer"./produit.composant.css";
exporterconstante Données = () => {
constante { données, erreur, isLoading, refetch } = useGetAllProductsQuery();
constante [productsData, setProductsData] = useState([]);


constante handleDisplayData = () => {
 récupérer();
 setProductsData (données?.produits);
 };
retour (
"produit-conteneur">

Ce code illustre un composant React qui utilise le crochet useGetAllProductsQuery fourni par la tranche d'API pour récupérer des données à partir du point de terminaison d'API spécifié.

Lorsque l'utilisateur clique sur le bouton Afficher les données, la fonction handleDisplayData s'exécute, envoyant une requête HTTP à l'API pour récupérer les données du produit. Une fois la réponse reçue, la variable de données des produits est mise à jour avec les données de réponse. Enfin, le composant affiche une liste des détails du produit.

Mettre à jour le composant d'application

Apportez les modifications suivantes au code dans le fichier App.js :

importer"./App.css";
importer { Données } depuis"./composants/Données";
importer { magasin } depuis"./magasin";
importer { Fournisseur } depuis"réagir-redux";
importer { Fournisseur d'API } depuis"@reduxjs/toolkit/query/react";
importer { produitsApi } depuis"./features/apiSlice";
fonctionApplication() {
retour (


"Application">

 </div>
 </ApiProvider>
 </Provider>
 );
}
exporterdéfaut application ;

Ce code encapsule le composant Data avec deux fournisseurs. Ces deux fournisseurs accordent au composant l'accès au magasin Redux et aux fonctionnalités de requête RTK lui permettant de récupérer et d'afficher les données de l'API.

Il est facile de configurer Redux Toolkit Query pour récupérer efficacement les données d'une source spécifiée avec un minimum de code. De plus, vous pouvez également incorporer des fonctions pour modifier les données stockées en définissant des points de terminaison de mutation dans le composant de tranche d'API.

En combinant les fonctionnalités de Redux avec les capacités de récupération de données de RTK, vous pouvez obtenir une solution complète de gestion d'état pour vos applications Web React.