Redux Toolkit Query kan tage smerten ud af meget af dit datahåndteringsarbejde. Opdag hvordan.

React er et populært JavaScript-bibliotek til opbygning af brugergrænseflader til webapplikationer. Når du bygger en applikation, er det vigtigt at overveje en effektiv datastyringstilgang for at sikre, at du henter og gengiver data i browseren korrekt som svar på brugerinteraktioner.

Imidlertid kan styring af denne proces tilsyneladende blive en kedelig og fejltilbøjelig opgave, især hvis du henter data fra flere kilder, og du konsekvent skal opdatere en række tilstande. I sådanne tilfælde giver Redux Toolkit Query en effektiv løsning.

Redux Toolkit-forespørgsel (RTK Query) er et datahentningsværktøj bygget oven på Redux Toolkit. Dens officielle dokumentation beskriver RTK Query som "et kraftfuldt datahentnings- og cachingværktøj designet til at forenkle almindelige tilfælde for indlæsning af data i en webapplikation, hvilket eliminerer behovet for at håndskrive datahentnings- og cachinglogik dig selv".

instagram viewer

Grundlæggende giver det et sæt funktioner og muligheder, der strømliner processen med at hente og administrere data fra API'er eller enhver anden datakilde fra en React-applikation.

Selvom der er ligheder mellem Redux Toolkit Query og React Query, er en hovedfordel ved Redux Toolkit Query dens problemfri integration med Redux, et statsforvaltningsbibliotek, hvilket giver mulighed for en komplet datahentnings- og tilstandsstyringsløsning til React-applikationer, når de bruges sammen.

Nogle af kernefunktionerne i RTK inkluderer datacache, en forespørgselsstyringsfunktion og fejlhåndtering.

For at komme i gang kan du hurtigt oprette et React-projekt lokalt ved hjælp af Opret React App kommando.

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

Alternativt kan du opsæt et React-projekt ved hjælp af Vite, et nyt værktøj og udviklingsserver til webapplikationer.

Du kan finde dette projekts kode i denne GitHub-depot.

Installer de påkrævede afhængigheder

Når du har dit React-projekt op at køre, skal du gå videre og installere følgende pakker.

npm installer @reduxjs/toolkit react-redux

Definer et API-udsnit

Et API-udsnit er en komponent, der inkluderer den nødvendige Redux-logik til at integrere med og interagere med specificerede API-endepunkter. Det giver en standardiseret måde at definere både forespørgselsslutpunkter til hentning af data og mutationsslutpunkter til ændring af dataene.

Grundlæggende giver et API-udsnit dig mulighed for at definere slutpunkterne for at anmode om og foretage ændringer af data fra en bestemt kilde, hvilket giver en strømlinet tilgang til integration med API'er.

I src mappe, opret en ny mappe og navngiv den, funktioner. Opret en ny fil i denne mappe: apiSlice.js, og tilføj koden nedenfor:

importere { createApi, fetchBaseQuery } fra"@reduxjs/toolkit/query/react";
eksportkonst productsApi = createApi({
 reducerPath: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),


 endepunkter: (Bygger) => ({
 getAllProducts: builder.query({
 forespørgsel: () =>"Produkter",
 }),
 getProduct: builder.query({
 forespørgsel: (produkt) =>`produkter/søgning? q=${produkt}`, 
 }),
 }),
});
eksportkonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Denne kode definerer et API-udsnit kaldet produkterApi ved hjælp af Redux Toolkit's skabeApi fungere. API-udsnittet har følgende egenskaber:

  • EN reducerPath ejendom - angiver navnet på reducereren i Redux-butikken.
  • Det baseQuery egenskab - angiver basis-URL'en for alle API-anmodninger ved hjælp af fetchBaseQuery funktion leveret af Redux Toolkit.
  • API endepunkter - angiv de tilgængelige slutpunkter for dette API-udsnit ved hjælp af Bygger objekt. I dette tilfælde definerer koden to endepunkter.

Til sidst genereres to kroge fra produkter API objekt, som identificerer de to endepunkter. Du kan bruge disse kroge i forskellige React-komponenter til at lave API-anmodninger, hente data og ændre tilstanden som svar på brugerens interaktion.

Denne tilgang strømliner tilstandsstyringen og datahentning i React-applikationen.

Konfigurer Redux Store

Efter at have hentet data fra API'et, cacher RTK Query dataene i Redux-lageret. Butikken fungerer i dette tilfælde som en central hub til styring af tilstanden for API-anmodninger fra React applikation, inklusive data hentet fra disse API-anmodninger, der sikrer komponenter adgang og opdatere disse data som havde brug for.

I src-mappen skal du oprette en store.js fil og tilføj følgende kodelinjer:

importere { configureStore } fra"@reduxjs/værktøjssæt";
importere { productsApi } fra"./features/apiSlice";
eksportkonst butik = configureStore({
 reducering: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 mellemvare: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Denne kode opretter en ny Redux-butik med to hoveddele af konfiguration:

  1. Reducer: Dette definerer, hvordan butikken skal håndtere opdateringer til staten. I dette tilfælde produkterApi.reducer sendes ind som reduceringsfunktionen og får en unik reducerPath-nøgle til at identificere den i butikkens overordnede tilstand.
  2. Mellemvare: Dette definerer enhver yderligere middleware, der skal gælde for butikken.

Det resulterende butik object er et fuldt konfigureret Redux-lager, som kan bruges til at administrere applikationens tilstand.

Ved at konfigurere butikken på denne måde, kan applikationen nemt administrere tilstanden af ​​API-anmodninger og behandle deres resultater på en standardiseret måde ved hjælp af Redux Toolkit.

Opret en komponent til at implementere RTK-funktionaliteten

Opret en ny i src-mappen komponenter mappe med en ny fil inde: Data.js.

Tilføj denne kode til filen Data.js:

importere { useGetAllProductsQuery } fra"../features/apiSlice";
importere Reager, { useState } fra"reagere";
importere"./product.component.css";
eksportkonst Data = () => {
konst { data, error, isLoading, refetch } = useGetAllProductsQuery();
konst [productsData, setProductsData] = useState([]);


konst handleDisplayData = () => {
 genhent();
 setProductsData (data?.produkter);
 };
Vend tilbage (
"produkt-beholder">

Denne kode demonstrerer en React-komponent, der bruger useGetAllProductsQuery-hooken, der leveres af API-udsnittet, til at hente data fra det angivne API-slutpunkt.

Når brugeren klikker på knappen Vis data, udføres handleDisplayData-funktionen og sender en HTTP-anmodning til API'et for at hente produktdata. Når svaret er modtaget, opdateres produkternes datavariabel med svardataene. Til sidst gengiver komponenten en liste over produktdetaljer.

Opdater app-komponenten

Foretag følgende ændringer af koden i App.js-filen:

importere"./App.css";
importere { Data } fra"./komponenter/Data";
importere { butik } fra"./butik";
importere { Udbyder } fra"react-redux";
importere { ApiProvider } fra"@reduxjs/toolkit/query/react";
importere { productsApi } fra"./features/apiSlice";
fungereApp() {
Vend tilbage (


"App">

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

Denne kode omslutter Data-komponenten med to udbydere. Disse to udbydere giver komponenten adgang til Redux-butikken og RTK-forespørgselsfunktioner, så den kan hente og vise data fra API'en.

Det er nemt at konfigurere Redux Toolkit Query til effektivt at hente data fra en specificeret kilde med minimal kode. Desuden kan du også inkorporere funktioner til at ændre lagrede data ved at definere mutationsslutpunkter i API-udsnitskomponenten.

Ved at kombinere funktionerne i Redux med RTK's datahentningsevner kan du opnå en omfattende tilstandsstyringsløsning til dine React-webapplikationer.