React est une bibliothèque JavaScript populaire pour la construction d’interfaces utilisateur pour les applications web. Lors de la construction d’une application, il est important de considérer une approche efficace de la gestion des données pour s’assurer que vous récupérez et rendez 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 sources multiples et que vous devez constamment mettre à jour un certain nombre d’états. Dans de tels cas, Redux Toolkit Query fournit une solution efficace.

Qu’est-ce que Redux Toolkit Query ?

Redux Toolkit Query (RTK Query) est un outil de récupération de données construit au-dessus du Redux Toolkit. Sa documentation officielle décrit RTK Query comme « un puissant outil de récupération et de mise en cache de données conçu pour simplifier les cas courants de chargement de données dans une application web, éliminant ainsi le besoin d’écrire soi-même la logique de récupération et de mise en cache des données ».

Lire  Les 5 meilleurs sites web pour trouver des emplois de saisie de données en ligne

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 des API ou de toute autre source de données à partir d’une application React.

Un MacBook avec des lignes de code sur son écran sur un bureau occupé.

Bien qu’il y ait 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 collecte de données et de gestion d’état pour les applications React lorsqu’elles sont utilisées ensemble.

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

Démarrer avec Redux Toolkit Query dans une application React

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

 mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd react-rtq-example 
npm start

Vous pouvez également mettre en place un projet React en utilisant Vite, un nouvel outil de construction et un serveur de développement pour les applications web.

Vous pouvez trouver le code de ce projet dans ce dépôt GitHub.

Installer les dépendances requises

Une fois que votre projet React est opérationnel, installez les paquets suivants.

 npm install @reduxjs/toolkit react-redux

Définir une tranche d’API

Une tranche d’API est un composant qui comprend la logique Redux nécessaire à l’intégration et à l’interaction avec des points d’extrémité d’API spécifiés. Il fournit un moyen standardisé de définir à la fois des points d’extrémité de requête pour récupérer des données et des points d’extrémité 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 d’une source particulière, fournissant une approche rationalisée de l’intégration avec les API.

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

 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const productsApi = createApi({
  reducerPath: "productsAp",
  baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),

  endpoints: (builder) => ({
    getAllProducts: builder.query({
      query: () => "products",
    }),
    getProduct: builder.query({
      query: (product) => `products/search?q=${product}`, 
    }),
  }),
});

export const { useGetAllProductsQuery , useGetProductQuery } = productsApi;

Ce code définit une tranche d’API appelée productsApi en utilisant la boîte à outils Redux createApi . La tranche d’API contient les propriétés suivantes :

  • A reducerPath définit le nom du réducteur dans le magasin Redux.
  • La propriété baseQuery spécifie l’URL de base pour toutes les requêtes API utilisant la propriété fetchBaseQuery fonction fournie par Redux Toolkit.
  • API points de terminaison – spécifie les points de terminaison disponibles pour cette tranche d’API à l’aide de l’attribut constructeur . Dans ce cas, le code définit deux points d’extrémité.

Enfin, deux crochets sont générés à partir de l’objet productsAPI qui identifie les deux points d’extrémité. Vous pouvez utiliser ces crochets dans divers composants React pour effectuer des demandes d’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 les met en cache dans le magasin Redux. Le magasin, dans ce cas, sert de plaque tournante centrale pour gérer l’état des requêtes API effectuées depuis l’application React, y compris les données récupérées à partir de ces requêtes API, en veillant à ce que les composants accèdent à ces données et les mettent à jour si nécessaire.

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

 import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./features/apiSlice";

export const store = configureStore({
  reducer: {
   [productsApi.reducerPath]: productsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
   getDefaultMiddleware().concat(productsApi.middleware),
});

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

  1. Réducteur: Ceci définit comment le magasin doit gérer les mises à jour de l’état. Dans ce cas, l’élément productsApi.reducer est transmise en tant que fonction de réduction et reçoit une clé unique reducerPath pour l’identifier dans l’état global du magasin.
  2. Logiciel médiateur: Ceci définit tout logiciel intermédiaire supplémentaire qui devrait s’appliquer au magasin.

Le résultat magasin 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 d’une manière standardisée à l’aide de la boîte à outils Redux.

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

Dans le répertoire src, créez un nouveau composant composants avec un nouveau fichier à l’intérieur : Data.js.

Ajoutez ce code au fichier Data.js :

 import { useGetAllProductsQuery } from "../features/apiSlice";
import React, { useState } from "react";
import "./product.component.css";

export const Data = () => {
  const { data, error, isLoading, refetch } = useGetAllProductsQuery();
  const [productsData, setProductsData] = useState([]);

  const handleDisplayData = () => {
    refetch();
    setProductsData(data?.products);
  };

  return (
    <div className="product-container">
      <button className="product-button" onClick={handleDisplayData}>
        Display Data
      </button>
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      <label className="product-label">Products:</label>
      {productsData && productsData.length > 0 && (
        <ul>
          {productsData.slice(0, 4).map((product) => (
            <li className="product-details" key={product.id}>
              <p>Name: {product.title}</p>
              <p>Description: {product.description}</p>
              <p>Price: {product.price}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

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

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

Mise à jour du composant App

Apportez les modifications suivantes au code du fichier App.js :

 import "./App.css";
import { Data } from "./components/Data";
import { store } from "./store";
import { Provider } from "react-redux";
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { productsApi } from "./features/apiSlice";

function App() {
  return (
    <Provider store={store}>
      <ApiProvider api={productsApi}>
        <div className="App">
          <Data />
        </div>
      </ApiProvider>
    </Provider>
  );
}

export default App;

Ce code enveloppe le composant Data avec deux fournisseurs. Ces deux fournisseurs permettent au composant d’accéder au magasin Redux et aux fonctionnalités RTK Query, ce qui lui permet de récupérer et d’afficher des données à partir de l’API.

Utiliser Redux Toolkit Query dans les applications Web

Il est facile de configurer Redux Toolkit Query pour récupérer efficacement des données à partir 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 API slice.

En combinant les fonctionnalités de Redux avec les capacités de RTK à récupérer des données, vous pouvez obtenir une solution complète de gestion de l’état pour vos applications web React.