Kako pridobiti podatke v Reactu s poizvedbo Redux Toolkit

React je priljubljena knjižnica JavaScript za izdelavo uporabniških vmesnikov za spletne aplikacije. Ko gradite aplikacijo, je pomembno razmisliti o učinkovitem pristopu upravljanja podatkov, da zagotovite, da podatke v brskalniku ustrezno pridobite in upodabljate kot odgovor na interakcije uporabnikov.

Vendar pa lahko upravljanje tega procesa na videz postane dolgočasno opravilo, ki je nagnjeno k napakam, zlasti če pridobivate podatke iz več virov in morate dosledno posodabljati številna stanja. V takšnih primerih je Redux Toolkit Query učinkovita rešitev.

Poizvedba Redux Toolkit (RTK Query) je orodje za pridobivanje podatkov, zgrajeno na vrhu orodja Redux Toolkit. Njegova uradna dokumentacija opisuje RTK Query kot "močno orodje za pridobivanje podatkov in predpomnjenje, zasnovano za poenostavitev pogosti primeri nalaganja podatkov v spletni aplikaciji, odpravlja potrebo po ročnem pisanju logike pridobivanja podatkov in predpomnjenja sebe".

V bistvu zagotavlja nabor funkcij in zmožnosti, ki poenostavijo postopek pridobivanja in upravljanja podatkov iz API-jev ali katerega koli drugega vira podatkov iz aplikacije React.

Čeprav sta med Redux Toolkit Query in React Query podobnosti, je ena glavnih prednosti Redux Toolkit Query njegova brezhibna integracija z Redux, knjižnica državnega upravljanja, ki omogoča popolno rešitev za pridobivanje podatkov in upravljanje stanja za aplikacije React, kadar se uporabljajo skupaj.

Nekatere glavne funkcije RTK vključujejo predpomnjenje podatkov, funkcijo upravljanja poizvedb in obravnavanje napak.

Za začetek lahko hitro zavrtite projekt React lokalno z uporabo Ustvari aplikacijo React ukaz.

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd reakcija-rtq-primer 
npm začetek

Lahko pa tudi nastavite projekt React z uporabo Vite, novo orodje za gradnjo in razvojni strežnik za spletne aplikacije.

Tukaj lahko najdete kodo tega projekta Repozitorij GitHub.

Namestite zahtevane odvisnosti

Ko zaženete in zaženete projekt React, nadaljujte in namestite naslednje pakete.

npm namestite @reduxjs/toolkit react-redux

Definirajte rezino API

Rezina API je komponenta, ki vključuje potrebno logiko Redux za integracijo in interakcijo z določenimi končnimi točkami API. Zagotavlja standardiziran način za definiranje končnih točk poizvedbe za pridobivanje podatkov in končnih točk mutacije za spreminjanje podatkov.

V bistvu vam rezina API omogoča, da definirate končne točke za zahtevanje in spreminjanje podatkov iz določenega vira, kar zagotavlja poenostavljen pristop k integraciji z API-ji.

V src imenik, ustvarite novo mapo in jo poimenujte, Lastnosti. Znotraj te mape ustvarite novo datoteko: apiSlice.jsin dodajte spodnjo kodo:

uvoz {createApi, fetchBaseQuery} od"@reduxjs/toolkit/query/react";
izvozkonst productsApi = createApi({
 reduktorPath: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 končne točke: (gradbenik) => ({
 getAllProducts: builder.query({
 poizvedba: () =>"izdelki",
 }),
 getProduct: builder.query({
 poizvedba: (izdelek) =>`izdelki/iskanje? q=${product}`, 
 }),
 }),
});
izvozkonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Ta koda definira imenovano rezino API productsApi z uporabo orodja Redux Toolkit createApi funkcijo. Rezina API ima naslednje lastnosti:

• A reduktorPath lastnost - nastavi ime reduktorja v trgovini Redux.
• The baseQuery lastnost - podaja osnovni URL za vse zahteve API-ja, ki uporabljajo fetchBaseQuery funkcija, ki jo zagotavlja Redux Toolkit.
• API končne točke - določite razpoložljive končne točke za to rezino API z uporabo gradbenik predmet. V tem primeru koda definira dve končni točki.

Končno se iz productsAPI objekt, ki identificira dve končni točki. Te kljuke lahko uporabite v različnih komponentah React za izdelavo zahtev API, pridobivanje podatkov in spreminjanje stanja kot odgovor na interakcijo uporabnika.

Ta pristop poenostavi upravljanje stanja in pridobivanje podatkov v aplikaciji React.

Konfigurirajte Redux Store

Po pridobivanju podatkov iz API-ja RTK Query predpomni podatke v shrambo Redux. Trgovina v tem primeru služi kot osrednje središče za upravljanje stanja zahtev API-ja, narejenih iz Reacta aplikacijo, vključno s podatki, pridobljenimi iz teh zahtev API-jev, ki zagotavljajo dostop komponent in te podatke posodabljajo kot potrebno.

V imeniku src ustvarite a store.js in dodajte naslednje vrstice kode:

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

Ta koda ustvari novo trgovino Redux z dvema glavnima deloma konfiguracije:

1. Reduktor: To določa, kako naj trgovina obravnava posodobitve stanja. V tem primeru je izdelkiApi.reduktor se posreduje kot funkcija reduktorja in dobi enoličen ključ reduktorja, da ga identificira v celotnem stanju trgovine.
2. Vmesna programska oprema: To definira vso dodatno vmesno programsko opremo, ki bi morala veljati za trgovino.

Posledično trgovina objekt je popolnoma konfigurirana shramba Redux, ki se lahko uporablja za upravljanje stanja aplikacije.

S takšno konfiguracijo trgovine lahko aplikacija enostavno upravlja stanje API zahtev in njihove rezultate obdeluje na standardiziran način z uporabo Redux Toolkit.

Ustvarite komponento za implementacijo funkcionalnosti RTK

V imeniku src ustvarite nov komponente mapa z novo datoteko v njej: Data.js.

Dodajte to kodo v datoteko Data.js:

uvoz {useGetAllProductsQuery} od"../features/apiSlice";
uvoz Odziv, {useState} od"reagirati";
uvoz"./product.component.css";
izvozkonst Podatki = () => {
konst { data, error, isLoading, refetch } = useGetAllProductsQuery();
konst [productsData, setProductsData] = useState([]);
konst handleDisplayData = () => {
 ponovno pridobi();
 setProductsData (data?.products);
 };
vrnitev (
"posoda za izdelek">
"izdelek-gumb" onClick={handleDisplayData}>
 Prikaz podatkov
 </button>
 {isLoading && <div>Nalaganje...div>}
 {napaka && <div>Napaka: {error.message}div>}
"oznaka izdelka">Izdelki:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).zemljevid((izdelek) => (
"Podrobnosti produkta" key={product.id}>
Ime: {product.title}</p>

Opis: {product.description}</p>

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

Ta koda prikazuje komponento React, ki uporablja kljuko useGetAllProductsQuery, ki jo zagotavlja rezina API, za pridobivanje podatkov iz navedene končne točke API.

Ko uporabnik klikne gumb Prikaži podatke, se izvede funkcija handleDisplayData, ki API-ju pošlje zahtevo HTTP za pridobitev podatkov o izdelku. Ko je odgovor prejet, se spremenljivka podatkov o izdelkih posodobi s podatki o odzivu. Končno komponenta upodobi seznam podrobnosti o izdelku.

Posodobite komponento aplikacije

Naredite naslednje spremembe kode v datoteki App.js:

uvoz"./App.css";
uvoz {Podatki} od"./components/Data";
uvoz {trgovina} od"./trgovina";
uvoz {Ponudnik} od"react-redux";
uvoz {ApiProvider} od"@reduxjs/toolkit/query/react";
uvoz {productApi} od"./features/apiSlice";
funkcijoaplikacija() {
vrnitev (


"Aplikacija">

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

Ta koda ovije podatkovno komponento z dvema ponudnikoma. Ta dva ponudnika komponenti podelita dostop do funkcije trgovine Redux in RTK Query, kar ji omogoča pridobivanje in prikaz podatkov iz API-ja.

Redux Toolkit Query je enostavno konfigurirati za učinkovito pridobivanje podatkov iz določenega vira z minimalno kodo. Poleg tega lahko vključite tudi funkcije za spreminjanje shranjenih podatkov z definiranjem končnih točk mutacije v komponenti rezine API.

Če združite funkcije Reduxa z zmožnostmi pridobivanja podatkov RTK, lahko pridobite celovito rešitev za upravljanje stanja za vaše spletne aplikacije React.