Hvordan hente data i React ved å bruke Redux Toolkit Query

React er et populært JavaScript-bibliotek for å bygge brukergrensesnitt for webapplikasjoner. Når du bygger en applikasjon, er det viktig å vurdere en effektiv databehandlingstilnærming for å sikre at du henter og gjengir data i nettleseren på riktig måte, som svar på brukerinteraksjoner.

Å administrere denne prosessen kan imidlertid tilsynelatende bli en kjedelig og feilutsatt oppgave, spesielt hvis du henter data fra flere kilder, og du må konsekvent oppdatere en rekke tilstander. I slike tilfeller gir Redux Toolkit Query en effektiv løsning.

Redux Toolkit Query (RTK Query) er et datahentingsverktøy bygget på toppen av Redux Toolkit. Den offisielle dokumentasjonen beskriver RTK Query som "et kraftig verktøy for datahenting og caching designet for å forenkle Vanlige tilfeller for lasting av data i en nettapplikasjon, eliminerer behovet for å håndskrive logikk for datahenting og caching deg selv".

I hovedsak gir den et sett med funksjoner og muligheter som effektiviserer prosessen med å hente og administrere data fra APIer eller andre datakilder fra en React-applikasjon.

Selv om det er likheter mellom Redux Toolkit Query og React Query, er en hovedfordel med Redux Toolkit Query dens sømløse integrasjon med Redux, et statlig ledelsesbibliotek, som muliggjør en komplett datahentings- og tilstandsadministrasjonsløsning for React-applikasjoner når de brukes sammen.

Noen av kjernefunksjonene til RTK inkluderer databufring, en spørringsadministrasjonsfunksjon og feilhåndtering.

For å komme i gang kan du raskt spinne opp et React-prosjekt lokalt ved å bruke Opprett 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 sette opp et React-prosjekt ved hjelp av Vite, et nytt verktøy og utviklingsserver for webapplikasjoner.

Du finner dette prosjektets kode i denne GitHub-depot.

Installer de nødvendige avhengighetene

Når du har startet React-prosjektet ditt, fortsett og installer følgende pakker.

npm installer @reduxjs/toolkit react-redux

Definer en API-del

En API-del er en komponent som inkluderer den nødvendige Redux-logikken for å integrere med og samhandle med spesifiserte API-endepunkter. Det gir en standardisert måte å definere både spørringsendepunkter for henting av data og mutasjonsendepunkter for å endre dataene.

I hovedsak lar en API-del deg definere endepunktene for å forespørre og gjøre endringer i dataene fra en bestemt kilde, og gir en strømlinjeformet tilnærming til integrering med APIer.

I src katalog, opprett en ny mappe og navngi den, egenskaper. Opprett en ny fil i denne mappen: apiSlice.js, og legg til koden nedenfor:

import { createApi, fetchBaseQuery } fra"@reduxjs/toolkit/query/react";
eksportkonst productsApi = createApi({
 reduseringsbane: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 endepunkter: (bygger) => ({
 getAllProducts: builder.query({
 spørsmål: () =>"Produkter",
 }),
 getProduct: builder.query({
 spørsmål: (produkt) =>`produkter/søk? q=${product}`, 
 }),
 }),
});
eksportkonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Denne koden definerer en API-del kalt produkterApi ved hjelp av Redux Toolkit's oppretteApi funksjon. API-delen tar inn følgende egenskaper:

• EN reduseringsbane eiendom - setter navnet på reduseringen i Redux-butikken.
• De baseQuery egenskap - spesifiserer basis-URLen for alle API-forespørsler som bruker fetchBaseQuery funksjon levert av Redux Toolkit.
• API endepunkter - spesifiser de tilgjengelige endepunktene for denne API-delen ved å bruke bygger gjenstand. I dette tilfellet definerer koden to endepunkter.

Til slutt genereres to kroker fra produkterAPI objekt som identifiserer de to endepunktene. Du kan bruke disse krokene i ulike React-komponenter for å lage API-forespørsler, hente data og endre tilstanden som svar på brukerens interaksjon.

Denne tilnærmingen effektiviserer statsadministrasjonen og datahentingen i React-applikasjonen.

Konfigurer Redux Store

Etter å ha hentet dataene fra APIen, cacher RTK Query dataene i Redux-lageret. Butikken, i dette tilfellet, fungerer som et sentralt knutepunkt for å administrere tilstanden til API-forespørsler fra React applikasjon, inkludert dataene hentet fra disse API-forespørslene som sikrer at komponenter får tilgang til og oppdaterer disse dataene som behov for.

I src-katalogen oppretter du en store.js fil og legg til følgende kodelinjer:

import { configureStore } fra"@reduxjs/verktøysett";
import { productsApi } fra"./features/apiSlice";
eksportkonst store = configureStore({
 redusering: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 mellomvare: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Denne koden oppretter en ny Redux-butikk, med to hovedkonfigurasjonsdeler:

1. Reduser: Dette definerer hvordan butikken skal håndtere oppdateringer til staten. I dette tilfellet produkterApi.reducer sendes inn som reduseringsfunksjonen og får en unik reduseringsPath-nøkkel for å identifisere den innenfor butikkens generelle tilstand.
2. Mellomvare: Dette definerer eventuell ekstra mellomvare som skal gjelde for butikken.

Resultatet butikk object er en fullt konfigurert Redux-butikk, som kan brukes til å administrere tilstanden til applikasjonen.

Ved å konfigurere butikken på denne måten kan applikasjonen enkelt administrere tilstanden til API-forespørsler, og behandle resultatene deres på en standardisert måte ved hjelp av Redux Toolkit.

Lag en komponent for å implementere RTK-funksjonaliteten

Opprett en ny i src-katalogen komponenter mappe med en ny fil inni: Data.js.

Legg til denne koden i Data.js-filen:

import { useGetAllProductsQuery } fra"../features/apiSlice";
import Reager, { useState } fra"reagere";
import"./product.component.css";
eksportkonst Data = () => {
konst { data, error, isLoading, refetch } = useGetAllProductsQuery();
konst [productsData, setProductsData] = useState([]);
konst handleDisplayData = () => {
 hente();
 setProductsData (data?.produkter);
 };
komme tilbake (
"produkt-beholder">
"produkt-knapp" onClick={handleDisplayData}>
 Vis data
 </button>
 {laster && <div>Laster inn...div>}
 {feil && <div>Feil: {error.message}div>}
"produkt-etikett">Produkter:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).kart((produkt) => (
"produkt detaljer" key={product.id}>
Navn: {product.title}</p>

Beskrivelse: {product.description}</p>

Pris: {product.price}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

Denne koden demonstrerer en React-komponent som bruker useGetAllProductsQuery-kroken levert av API-delen for å hente data fra det angitte API-endepunktet.

Når brukeren klikker på Vis data-knappen, kjøres handleDisplayData-funksjonen, og sender en HTTP-forespørsel til API for å hente produktdata. Når svaret er mottatt, oppdateres produktenes datavariabel med svardataene. Til slutt gjengir komponenten en liste over produktdetaljer.

Oppdater appkomponenten

Gjør følgende endringer i koden i App.js-filen:

import"./App.css";
import { Data } fra"./komponenter/Data";
import { butikk } fra"./butikk";
import { Forsørger } fra"react-redux";
import { ApiProvider } fra"@reduxjs/toolkit/query/react";
import { productsApi } fra"./features/apiSlice";
funksjonApp() {
komme tilbake (


"App">

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

Denne koden omslutter Data-komponenten med to leverandører. Disse to leverandørene gir komponenten tilgang til Redux-butikken og RTK Query-funksjoner som lar den hente og vise data fra API.

Det er enkelt å konfigurere Redux Toolkit Query for å effektivt hente data fra en spesifisert kilde med minimal kode. Dessuten kan du også inkludere funksjoner for å modifisere lagrede data ved å definere mutasjonsendepunkter i API-slice-komponenten.

Ved å kombinere funksjonene til Redux med RTKs datahentingsevner, kan du få en omfattende tilstandsadministrasjonsløsning for dine React-webapplikasjoner.