Redux Toolkit Query kan veel van uw gegevensbeheerwerk verlichten. Ontdek hoe.

React is een populaire JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces voor webapplicaties. Bij het bouwen van een toepassing is het belangrijk om een ​​efficiënte benadering van gegevensbeheer te overwegen om ervoor te zorgen dat u gegevens op de juiste manier ophaalt en weergeeft in de browser, als reactie op gebruikersinteracties.

Het beheer van dit proces kan echter schijnbaar een vervelende en foutgevoelige taak worden, vooral als u gegevens uit meerdere bronnen ophaalt en u een aantal statussen consequent moet bijwerken. In dergelijke gevallen biedt Redux Toolkit Query een efficiënte oplossing.

Redux Toolkit-query (RTK Query) is een tool voor het ophalen van gegevens die bovenop de Redux Toolkit is gebouwd. De officiële documentatie beschrijft RTK Query als "een krachtige tool voor het ophalen en cachen van gegevens die is ontworpen om te vereenvoudigen veelvoorkomende gevallen voor het laden van gegevens in een webtoepassing, waardoor het niet meer nodig is om logica voor het ophalen en cachen van gegevens met de hand te schrijven jezelf".

instagram viewer

In wezen biedt het een reeks functies en mogelijkheden die het proces van het ophalen en beheren van gegevens van API's of een andere gegevensbron van een React-applicatie stroomlijnen.

Hoewel er overeenkomsten zijn tussen Redux Toolkit Query en React Query, is een belangrijk voordeel van Redux Toolkit Query de naadloze integratie met Redux, een bibliotheek voor staatsbeheer, waardoor een complete oplossing voor het ophalen van gegevens en statusbeheer mogelijk is voor React-applicaties wanneer ze samen worden gebruikt.

Enkele van de kernfuncties van RTK zijn gegevenscaching, een querybeheerfunctie en foutafhandeling.

Om aan de slag te gaan, kunt u snel lokaal een React-project opstarten met behulp van de Maak een React-app commando.

mkdir Reageren-RTQ
cd React-RTQ
npx maak-reageer-app reageer-rtq-voorbeeld
cd react-rtq-voorbeeld 
npm begin

Als alternatief kan dat een React-project opzetten met Vite, een nieuw gebouwde tool en ontwikkelserver voor webapplicaties.

U kunt de code van dit project hierin vinden GitHub-opslagplaats.

Installeer de vereiste afhankelijkheden

Zodra uw React-project actief is, kunt u doorgaan en de volgende pakketten installeren.

npm install @reduxjs/toolkit react-redux

Definieer een API-segment

Een API-segment is een component die de noodzakelijke Redux-logica bevat voor integratie met en interactie met gespecificeerde API-eindpunten. Het biedt een gestandaardiseerde manier om zowel query-eindpunten voor het ophalen van gegevens als mutatie-eindpunten voor het wijzigen van de gegevens te definiëren.

In wezen kunt u met een API-segment de eindpunten definiëren voor het opvragen en wijzigen van de gegevens van een bepaalde bron, wat een gestroomlijnde benadering biedt voor integratie met API's.

In de src map, maak een nieuwe map aan en geef deze een naam, functies. Maak in deze map een nieuw bestand aan: apiSlice.js, en voeg de onderstaande code toe:

importeren { createApi, fetchBaseQuery } van"@reduxjs/toolkit/query/react";
exporterenconst productsApi = createApi({
 reducerPath: "productenAp",
 baseQuery: fetchBaseQuery({ basisUrl: " https://dummyjson.com/" }),


 eindpunten: (bouwer) => ({
 getAllProducts: bouwer.query({
 vraag: () =>"producten",
 }),
 getProduct: bouwer.query({
 vraag: (Product) =>`producten/zoeken? q=${product}`, 
 }),
 }),
});
exporterenconst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Deze code definieert een API-segment genaamd productenApi met behulp van Redux Toolkit's createApi functie. Het API-segment heeft de volgende eigenschappen:

  • A verlooppad eigenschap - stelt de naam in van de reducer in de Redux-winkel.
  • De basisQuery eigenschap - specificeert de basis-URL voor alle API-verzoeken met behulp van de fetchBaseQuery functie geleverd door Redux Toolkit.
  • API eindpunten - specificeer de beschikbare eindpunten voor dit API-segment met behulp van de bouwer voorwerp. In dit geval definieert de code twee eindpunten.

Ten slotte worden er twee hooks gegenereerd uit de productenAPI object dat de twee eindpunten identificeert. U kunt deze hooks in verschillende React-componenten gebruiken om API-verzoeken te doen, gegevens op te halen en de status te wijzigen als reactie op de interactie van de gebruiker.

Deze aanpak stroomlijnt het statusbeheer en het ophalen van gegevens in de React-toepassing.

Configureer de Redux Store

Na het ophalen van de gegevens van de API, cachet RTK Query de gegevens in de Redux-opslag. De winkel dient in dit geval als een centrale hub voor het beheren van de status van API-verzoeken die vanuit de React worden gedaan toepassing, inclusief de gegevens die zijn opgehaald uit die API-verzoeken, zodat componenten toegang krijgen tot deze gegevens en deze gegevens bijwerken als nodig zijn.

Maak in de src-directory een winkel.js bestand en voeg de volgende regels code toe:

importeren { configureStore } van"@reduxjs/toolkit";
importeren { productenApi } van"./features/apiSlice";
exporterenconst store = configureStore({
 verloopstuk: {
 [productsApi.reducerPath]: productenApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productenApi.middleware),
});

Deze code maakt een nieuwe Redux-winkel aan, met twee hoofdconfiguraties:

  1. Verloopstuk: dit definieert hoe de winkel updates van de status moet afhandelen. In dit geval de productenApi.reducer wordt doorgegeven als de reducer-functie en krijgt een unieke reducerPath-sleutel om deze te identificeren binnen de algehele status van de winkel.
  2. Middleware: Dit definieert eventuele aanvullende middleware die van toepassing moet zijn op de winkel.

Het resultaat winkel object is een volledig geconfigureerd Redux-archief, dat kan worden gebruikt om de status van de applicatie te beheren.

Door de store op deze manier te configureren, kan de applicatie eenvoudig de status van API-verzoeken beheren en hun resultaten op een gestandaardiseerde manier verwerken met behulp van de Redux Toolkit.

Maak een component om de RTK-functionaliteit te implementeren

Maak in de map src een nieuw componenten map met daarin een nieuw bestand: Data.js.

Voeg deze code toe aan het Data.js-bestand:

importeren {gebruikGetAllProductsQuery} van"../features/apiSlice";
importeren Reageer, { useState } van"Reageer";
importeren"./product.component.css";
exporterenconst Gegevens = () => {
const { data, error, isLoading, refetch } = useGetAllProductsQuery();
const [productsData, setProductsData] = useState([]);


const handleDisplayData = () => {
 opnieuw ophalen();
 setProductsData (gegevens?.producten);
 };
opbrengst (
"productcontainer">

Deze code demonstreert een React-component die de useGetAllProductsQuery-hook gebruikt die door het API-segment wordt geleverd om gegevens op te halen van het opgegeven API-eindpunt.

Wanneer de gebruiker op de knop Gegevens weergeven klikt, wordt de functie handleDisplayData uitgevoerd, waarbij een HTTP-verzoek naar de API wordt verzonden om productgegevens op te halen. Zodra het antwoord is ontvangen, wordt de gegevensvariabele van het product bijgewerkt met de antwoordgegevens. Ten slotte geeft de component een lijst met productdetails weer.

Werk de app-component bij

Breng de volgende wijzigingen aan in de code in het bestand App.js:

importeren"./App.css";
importeren { Gegevens } van"./componenten/Data";
importeren { winkel } van"./winkel";
importeren { Aanbieder } van"reageer-redux";
importeren { ApiProvider } van"@reduxjs/toolkit/query/react";
importeren { productenApi } van"./features/apiSlice";
functieapp() {
opbrengst (


"App">

 </div>
 </ApiProvider>
 </Provider>
 );
}
exporterenstandaard App;

Deze code verpakt de gegevenscomponent met twee providers. Deze twee providers verlenen de component toegang tot de Redux-winkel en RTK Query-functies waardoor het gegevens van de API kan ophalen en weergeven.

Het is eenvoudig om Redux Toolkit Query te configureren om efficiënt gegevens op te halen uit een gespecificeerde bron met minimale code. Bovendien kunt u ook functies opnemen om opgeslagen gegevens te wijzigen door mutatie-eindpunten te definiëren in de API-segmentcomponent.

Door de functies van Redux te combineren met de mogelijkheden van RTK om gegevens op te halen, kunt u een uitgebreide oplossing voor statusbeheer verkrijgen voor uw React-webapplicaties.