Kako dohvatiti podatke u Reactu koristeći Redux Toolkit upit

React je popularna JavaScript biblioteka za izradu korisničkih sučelja za web aplikacije. Prilikom izrade aplikacije, važno je razmotriti učinkovit pristup upravljanju podacima kako biste osigurali da dohvaćate i prikazujete podatke u pregledniku na odgovarajući način, kao odgovor na interakcije korisnika.

Međutim, upravljanje ovim postupkom može naizgled postati zamoran zadatak sklon pogreškama, posebno ako dohvaćate podatke iz više izvora i morate dosljedno ažurirati određeni broj stanja. U takvim slučajevima Redux Toolkit Query pruža učinkovito rješenje.

Redux Toolkit upit (RTK Query) je alat za dohvaćanje podataka izgrađen povrh Redux Toolkita. Njegova službena dokumentacija opisuje RTK Query kao "snažan alat za dohvaćanje podataka i predmemoriju dizajniran da pojednostavi uobičajeni slučajevi za učitavanje podataka u web aplikaciji, eliminirajući potrebu za ručnim pisanjem logike dohvaćanja podataka i predmemoriranja sami".

U biti, pruža skup značajki i mogućnosti koje usmjeravaju proces dohvaćanja i upravljanja podacima iz API-ja ili bilo kojeg drugog izvora podataka iz React aplikacije.

Iako postoje sličnosti između Redux Toolkit Query i React Queryja, jedna glavna prednost Redux Toolkit Queryja je njegova besprijekorna integracija s Redux, knjižnica za upravljanje stanjem, što omogućuje potpuno dohvaćanje podataka i rješenje za upravljanje stanjem za React aplikacije kada se koriste zajedno.

Neke od temeljnih značajki RTK-a uključuju predmemoriju podataka, značajku upravljanja upitima i rukovanje pogreškama.

Za početak, možete brzo pokrenuti React projekt lokalno koristeći Napravi React aplikaciju naredba.

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-primjer
cd reagirati-rtq-primjer 
npm početak

Alternativno, možete postaviti React projekt koristeći Vite, novi alat za izradu i razvojni poslužitelj za web aplikacije.

Ovdje možete pronaći kod ovog projekta GitHub spremište.

Instalirajte potrebne ovisnosti

Nakon što pokrenete svoj React projekt, samo naprijed i instalirajte sljedeće pakete.

npm instalirajte @reduxjs/toolkit react-redux

Definirajte API odsječak

Odsječak API-ja je komponenta koja uključuje potrebnu Redux logiku za integraciju i interakciju s određenim krajnjim točkama API-ja. Omogućuje standardizirani način za definiranje krajnjih točaka upita za dohvaćanje podataka i krajnjih točaka mutacije za modificiranje podataka.

U suštini, API odsječak vam omogućuje definiranje krajnjih točaka za zahtjeve i izmjene podataka iz određenog izvora, pružajući pojednostavljen pristup integraciji s API-jima.

u src imenik, stvorite novu mapu i dajte joj naziv, značajke. Unutar ove mape stvorite novu datoteku: apiSlice.js, i dodajte kod u nastavku:

uvoz { createApi, fetchBaseQuery } iz"@reduxjs/toolkit/query/react";
izvozkonst productsApi = createApi({
 reduktorPath: "productsAp",
 baseQuery: fetchBaseQuery({ osnovniUrl: " https://dummyjson.com/" }),
 krajnje točke: (graditelj) => ({
 getAllProducts: builder.query({
 upit: () =>"proizvodi",
 }),
 getProduct: builder.query({
 upit: (proizvod) =>`proizvodi/pretraga? q=${product}`, 
 }),
 }),
});
izvozkonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Ovaj kod definira API odsječak tzv proizvodiApi koristeći Redux Toolkit createApi funkcija. API odsječak ima sljedeća svojstva:

• A reduktorPath svojstvo - postavlja naziv reduktora u Redux trgovini.
• The baseQuery svojstvo - navodi osnovni URL za sve API zahtjeve koji koriste dohvaćanjeBaseQuery funkcija koju pruža Redux Toolkit.
• API krajnje točke - odredite dostupne krajnje točke za ovaj API odsječak pomoću graditelj objekt. U ovom slučaju kod definira dvije krajnje točke.

Konačno, dvije kuke se generiraju iz productsAPI objekt koji identificira dvije krajnje točke. Možete koristiti ove kuke u različitim komponentama Reacta za slanje API zahtjeva, dohvaćanje podataka i promjenu stanja kao odgovor na interakciju korisnika.

Ovaj pristup pojednostavljuje upravljanje stanjem i dohvaćanje podataka u aplikaciji React.

Konfigurirajte Redux Store

Nakon dohvaćanja podataka iz API-ja, RTK Query sprema podatke u Redux pohranu. Trgovina, u ovom slučaju, služi kao središnje središte za upravljanje stanjem API zahtjeva napravljenih od Reacta aplikacija, uključujući podatke dohvaćene iz tih API zahtjeva koji osiguravaju pristup komponenti i ažuriranje ovih podataka kao potrebna.

U direktoriju src kreirajte a trgovina.js datoteku i dodajte sljedeće retke koda:

uvoz { configureStore } iz"@reduxjs/toolkit";
uvoz {productApi} iz"./features/apiSlice";
izvozkonst store = configureStore({
 reduktor: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 srednji softver: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Ovaj kod stvara novu Redux trgovinu, s dva glavna dijela konfiguracije:

1. Reduktor: Ovo definira kako trgovina treba obrađivati ​​ažuriranja stanja. U ovom slučaju, proizvodiApi.reduktor prosljeđuje se kao reduktorska funkcija i dobiva jedinstveni reduktorPath ključ za identifikaciju unutar ukupnog stanja trgovine.
2. Middleware: Ovo definira bilo koji dodatni međuware koji bi se trebao primijeniti na trgovinu.

Dobivena trgovina objekt je potpuno konfigurirana Redux trgovina, koja se može koristiti za upravljanje stanjem aplikacije.

Ovakvim konfiguriranjem trgovine aplikacija može jednostavno upravljati stanjem API zahtjeva, te obrađivati ​​njihove rezultate na standardiziran način pomoću Redux Toolkita.

Napravite komponentu za implementaciju RTK funkcionalnosti

U direktoriju src stvorite novi komponente mapa s novom datotekom unutra: Data.js.

Dodajte ovaj kod u datoteku Data.js:

uvoz {useGetAllProductsQuery} iz"../features/apiSlice";
uvoz Reagiraj, {useState} iz"reagirati";
uvoz"./product.component.css";
izvozkonst Podaci = () => {
konst { data, error, isLoading, refetch } = useGetAllProductsQuery();
konst [Podaci o proizvodima, setPodaci o proizvodima] = useState([]);
konst handleDisplayData = () => {
 ponovno dohvati();
 setProductsData (podaci?.products);
 };
povratak (
"kontejner proizvoda">
"gumb proizvoda" onClick={handleDisplayData}>
 Prikaz podataka
 </button>
 {isLoading && <div>Učitavam...div>}
 {greška && <div>Greška: {error.message}div>}
"oznaka proizvoda">Proizvodi:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).karta((proizvod) => (
"detalji o proizvodu" ključ={product.id}>
Naziv: {product.title}</p>

Opis: {product.description}</p>

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

Ovaj kod demonstrira komponentu React koja koristi kuku useGetAllProductsQuery koju pruža API odsječak za dohvaćanje podataka iz navedene krajnje točke API-ja.

Kada korisnik klikne gumb Prikaži podatke, izvršava se funkcija handleDisplayData, šaljući HTTP zahtjev API-ju za dohvat podataka o proizvodu. Nakon što se primi odgovor, varijabla podataka proizvoda ažurira se podacima o odgovoru. Na kraju, komponenta prikazuje popis pojedinosti o proizvodu.

Ažurirajte komponentu aplikacije

Napravite sljedeće promjene koda u datoteci App.js:

uvoz"./App.css";
uvoz { Podaci } iz"./components/Data";
uvoz {trgovina} iz"./trgovina";
uvoz { Pružatelj } iz"react-redux";
uvoz {ApiProvider} iz"@reduxjs/toolkit/query/react";
uvoz {productApi} iz"./features/apiSlice";
funkcijaaplikacija() {
povratak (


"Aplikacija">

 </div>
 </ApiProvider>
 </Provider>
 );
}
izvozzadano aplikacija;

Ovaj kod obavija podatkovnu komponentu s dva pružatelja usluga. Ova dva pružatelja dopuštaju komponenti pristup Redux pohrani i značajkama RTK Query omogućujući joj dohvaćanje i prikaz podataka iz API-ja.

Lako je konfigurirati Redux Toolkit Query za učinkovito dohvaćanje podataka iz određenog izvora s minimalnim kodom. Štoviše, također možete uključiti funkcije za izmjenu pohranjenih podataka definiranjem krajnjih točaka mutacije u komponenti API odsječka.

Kombinacijom značajki Reduxa s RTK-ovim mogućnostima dohvaćanja podataka možete dobiti sveobuhvatno rješenje za upravljanje stanjem za svoje React web aplikacije.