Redux Toolkit Query kann einen Großteil Ihrer Datenverwaltungsarbeit erleichtern. Entdecken Sie, wie.

React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen für Webanwendungen. Beim Erstellen einer Anwendung ist es wichtig, einen effizienten Datenverwaltungsansatz in Betracht zu ziehen, um sicherzustellen, dass Sie Daten im Browser als Reaktion auf Benutzerinteraktionen angemessen abrufen und rendern.

Die Verwaltung dieses Prozesses kann jedoch scheinbar zu einer mühsamen und fehleranfälligen Aufgabe werden, insbesondere wenn Sie Daten aus mehreren Quellen abrufen und eine Reihe von Status konsistent aktualisieren müssen. In solchen Fällen bietet Redux Toolkit Query eine effiziente Lösung.

Redux Toolkit-Abfrage (RTK Query) ist ein Tool zum Abrufen von Daten, das auf dem Redux Toolkit aufbaut. Die offizielle Dokumentation beschreibt RTK Query als „ein leistungsstarkes Tool zum Abrufen und Zwischenspeichern von Daten, das zur Vereinfachung entwickelt wurde Häufige Fälle für das Laden von Daten in eine Webanwendung, wodurch die Notwendigkeit entfällt, Datenabruf- und Caching-Logik von Hand zu schreiben du selbst".

Im Wesentlichen bietet es eine Reihe von Funktionen und Fähigkeiten, die den Prozess des Abrufens und Verwaltens von Daten aus APIs oder anderen Datenquellen aus einer React-Anwendung optimieren.

Obwohl es Ähnlichkeiten zwischen Redux Toolkit Query und React Query gibt, ist ein Hauptvorteil von Redux Toolkit Query die nahtlose Integration mit Redux, eine Zustandsverwaltungsbibliothek, was bei gemeinsamer Verwendung eine vollständige Datenabruf- und Zustandsverwaltungslösung für React-Anwendungen ermöglicht.

Zu den Kernfunktionen von RTK gehören Daten-Caching, eine Abfrageverwaltungsfunktion und Fehlerbehandlung.

Um zu beginnen, kannst du schnell ein React-Projekt lokal starten, indem du die React-App erstellen Befehl.

mkdir React-RTQ
cd React-RTQ
npx Create-React-App React-RTQ-Beispiel
cd-react-rtq-Beispiel 
npm starten

Alternativ können Sie Richten Sie ein React-Projekt mit Vite ein, ein neues Build-Tool und ein Entwicklungsserver für Webanwendungen.

Sie finden den Code dieses Projekts darin GitHub-Repository.

Installieren Sie die erforderlichen Abhängigkeiten

Sobald Sie Ihr React-Projekt zum Laufen gebracht haben, fahren Sie fort und installieren Sie die folgenden Pakete.

npm install @reduxjs/toolkitreakt-redux

Definieren Sie einen API-Slice

Ein API-Slice ist eine Komponente, die die erforderliche Redux-Logik für die Integration und Interaktion mit bestimmten API-Endpunkten enthält. Es bietet eine standardisierte Möglichkeit, sowohl Abfrageendpunkte zum Abrufen von Daten als auch Mutationsendpunkte zum Ändern der Daten zu definieren.

Im Wesentlichen ermöglicht Ihnen ein API-Slice, die Endpunkte zum Anfordern und Vornehmen von Änderungen an den Daten aus einer bestimmten Quelle zu definieren, wodurch ein optimierter Ansatz für die Integration mit APIs bereitgestellt wird.

Im Quelle Verzeichnis, erstellen Sie einen neuen Ordner und benennen Sie ihn, Merkmale. Erstellen Sie in diesem Ordner eine neue Datei: apiSlice.js, und fügen Sie den folgenden Code hinzu:

importieren { createApi, fetchBaseQuery } aus"@reduxjs/toolkit/query/react";
Exportkonst productsApi = createApi({
 ReducerPfad: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),


 Endpunkte: (Baumeister) => ({
 getAllProducts: builder.query({
 Anfrage: () =>"Produkte",
 }),
 getProduct: builder.query({
 Anfrage: (Produkt) =>`Produkte/Suche? q=${Produkt}`, 
 }),
 }),
});
Exportkonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Dieser Code definiert einen aufgerufenen API-Slice ProdukteApi mit dem Redux Toolkit createApi Funktion. Der API-Slice nimmt die folgenden Eigenschaften an:

  • A ReducerPath Eigenschaft - legt den Namen des Reducers im Redux Store fest.
  • Der baseQuery -Eigenschaft – gibt die Basis-URL für alle API-Anforderungen an, die die verwenden fetchBaseQuery Funktion, die von Redux Toolkit bereitgestellt wird.
  • API Endpunkte - Geben Sie die verfügbaren Endpunkte für diesen API-Slice mithilfe von an Baumeister Objekt. In diesem Fall definiert der Code zwei Endpunkte.

Abschließend werden aus der zwei Hooks generiert ProdukteAPI Objekt, das die beiden Endpunkte identifiziert. Sie können diese Hooks in verschiedenen React-Komponenten verwenden, um API-Anforderungen zu stellen, Daten abzurufen und den Status als Reaktion auf die Interaktion des Benutzers zu ändern.

Dieser Ansatz optimiert die Zustandsverwaltung und das Abrufen von Daten in der React-Anwendung.

Konfigurieren Sie den Redux-Speicher

Nach dem Abrufen der Daten von der API speichert RTK Query die Daten im Redux-Speicher zwischen. Der Store dient in diesem Fall als zentraler Knotenpunkt für die Verwaltung des Status von API-Anforderungen, die von React Anwendung, einschließlich der Daten, die von diesen API-Anforderungen abgerufen werden, um sicherzustellen, dass Komponenten auf diese Daten zugreifen und diese aktualisieren erforderlich.

Erstellen Sie im src-Verzeichnis eine store.js Datei und fügen Sie die folgenden Codezeilen hinzu:

importieren { Store konfigurieren } aus"@reduxjs/toolkit";
importieren { productsApi } aus"./features/apiSlice";
Exportkonst store = configureStore({
 Reduzierstück: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 Middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Dieser Code erstellt einen neuen Redux-Speicher mit zwei Hauptkonfigurationselementen:

  1. Reduzierer: Dies definiert, wie der Speicher mit Statusaktualisierungen umgehen soll. In diesem Fall ist die ProdukteApi.reducer wird als Reducer-Funktion übergeben und erhält einen eindeutigen ReducerPath-Schlüssel, um ihn im Gesamtzustand des Geschäfts zu identifizieren.
  2. Middleware: Dies definiert zusätzliche Middleware, die für das Geschäft gelten soll.

Das Ergebnis speichern -Objekt ist ein vollständig konfigurierter Redux-Speicher, mit dem der Status der Anwendung verwaltet werden kann.

Durch die Konfiguration des Speichers auf diese Weise kann die Anwendung den Status von API-Anfragen einfach verwalten und ihre Ergebnisse mithilfe des Redux-Toolkits auf standardisierte Weise verarbeiten.

Erstellen Sie eine Komponente zum Implementieren der RTK-Funktionalität

Erstellen Sie im src-Verzeichnis eine neue Komponenten Ordner mit einer neuen Datei darin: Data.js.

Fügen Sie diesen Code zur Data.js-Datei hinzu:

importieren { useGetAllProductsQuery } aus"../features/apiSlice";
importieren Reagieren, { useState } aus"reagieren";
importieren"./product.component.css";
Exportkonst Daten = () => {
konst { Daten, Fehler, wird geladen, Neuabruf } = useGetAllProductsQuery ();
konst [productsData, setProductsData] = useState([]);


konst handleDisplayData = () => {
 neu abrufen ();
 setProductsData (Daten?.Produkte);
 };
zurückkehren (
"Produktbehälter">

Dieser Code demonstriert eine React-Komponente, die den vom API-Slice bereitgestellten useGetAllProductsQuery-Hook verwendet, um Daten vom angegebenen API-Endpunkt abzurufen.

Wenn der Benutzer auf die Schaltfläche „Daten anzeigen“ klickt, wird die handleDisplayData-Funktion ausgeführt und sendet eine HTTP-Anfrage an die API, um Produktdaten abzurufen. Sobald die Antwort empfangen wurde, wird die Datenvariable der Produkte mit den Antwortdaten aktualisiert. Schließlich rendert die Komponente eine Liste mit Produktdetails.

Aktualisieren Sie die App-Komponente

Nehmen Sie die folgenden Änderungen am Code in der Datei App.js vor:

importieren"./App.css";
importieren { Daten } aus"./Komponenten/Daten";
importieren { speichern } aus"./speichern";
importieren { Anbieter } aus"react-redux";
importieren { APIProvider } aus"@reduxjs/toolkit/query/react";
importieren { productsApi } aus"./features/apiSlice";
FunktionApp() {
zurückkehren (


"App">

 </div>
 </ApiProvider>
 </Provider>
 );
}
ExportStandard Anwendung;

Dieser Code umschließt die Datenkomponente mit zwei Anbietern. Diese beiden Anbieter gewähren der Komponente Zugriff auf die Redux-Speicher- und RTK-Abfragefunktionen, die es ihr ermöglichen, Daten von der API abzurufen und anzuzeigen.

Es ist einfach, Redux Toolkit Query zu konfigurieren, um Daten aus einer bestimmten Quelle mit minimalem Code effizient abzurufen. Darüber hinaus können Sie auch Funktionen zum Ändern gespeicherter Daten integrieren, indem Sie Mutationsendpunkte in der API-Slice-Komponente definieren.

Durch die Kombination der Funktionen von Redux mit den Datenabruffähigkeiten von RTK erhalten Sie eine umfassende Zustandsverwaltungslösung für Ihre React-Webanwendungen.