Kuidas tuua andmeid Reactis Reduxi tööriistakomplekti päringu abil

React on populaarne JavaScripti teek veebirakenduste kasutajaliideste loomiseks. Rakenduse loomisel on oluline kaaluda tõhusat andmehaldusmeetodit, et tagada andmete toomine ja renderdamine brauseris vastavalt kasutaja interaktsioonidele.

Selle protsessi haldamine võib aga näiliselt muutuda tüütuks ja tõrkeohtlikuks ülesandeks, eriti kui hankite andmeid mitmest allikast ja peate järjekindlalt värskendama mitut olekut. Sellistel juhtudel pakub Redux Toolkit Query tõhusat lahendust.

Reduxi tööriistakomplekti päring (RTK Query) on andmete toomise tööriist, mis on ehitatud Reduxi tööriistakomplekti peale. Selle ametlik dokumentatsioon kirjeldab RTK Queryt kui "võimsat andmete toomise ja vahemällu salvestamise tööriista, mis on loodud lihtsustama Levinud juhtumid andmete laadimiseks veebirakendusse, välistades vajaduse käsitsi kirjutada andmete toomise ja vahemällu salvestamise loogikat ise".

Põhimõtteliselt pakub see funktsioonide ja võimaluste komplekti, mis lihtsustavad API-dest või mis tahes muust andmeallikast Reacti rakendusest andmete toomise ja haldamise protsessi.

Kuigi Redux Toolkit Query ja React Query vahel on sarnasusi, on Redux Toolkit Query üks peamisi eeliseid selle sujuv integreerimine Redux, riigihalduse raamatukogu, mis võimaldab kooskasutamisel Reacti rakenduste jaoks täielikku andmete toomist ja olekuhalduslahendust.

Mõned RTK põhifunktsioonid hõlmavad andmete vahemällu salvestamist, päringuhaldusfunktsiooni ja veakäsitlust.

Alustamiseks saate Reacti projekti kiiresti lokaalselt luua, kasutades Looge rakendus React käsk.

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

Teise võimalusena saate seadistage Vite abil Reacti projekt, uus ehitustööriist ja veebirakenduste arendusserver.

Selle projekti koodi leiate siit GitHubi hoidla.

Installige nõutavad sõltuvused

Kui olete oma Reacti projekti käivitanud ja käivitanud, installige järgmised paketid.

npm install @reduxjs/toolkit react-redux

Määratlege API osa

API slice on komponent, mis sisaldab vajalikku Reduxi loogikat määratletud API lõpp-punktidega integreerimiseks ja nendega suhtlemiseks. See pakub standardiseeritud viisi nii andmete toomise päringu lõpp-punktide kui ka andmete muutmise mutatsiooni lõpp-punktide määratlemiseks.

Põhimõtteliselt võimaldab API-lõik teil määratleda lõpp-punktid konkreetsest allikast pärit andmete taotlemiseks ja muutmiseks, pakkudes API-dega integreerimiseks sujuvamat lähenemisviisi.

Aastal src kataloogi, looge uus kaust ja andke sellele nimi, Funktsioonid. Looge selles kaustas uus fail: apiSlice.jsja lisage allolev kood:

importida { createApi, fetchBaseQuery } alates"@reduxjs/toolkit/query/react";
eksportidakonst productsApi = createApi({
 reduktorPath: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 lõpp-punktid: (ehitaja) => ({
 getAllProducts: builder.query({
 päring: () =>"tooted",
 }),
 getProduct: builder.query({
 päring: (toode) =>`tooted/otsing? q=${product}`, 
 }),
 }),
});
eksportidakonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

See kood määratleb API-lõigu, mida nimetatakse tootedApi kasutades Reduxi tööriistakomplekti looApi funktsiooni. API osal on järgmised omadused:

• A reduktorPath omadus - määrab Reduxi poes reduktori nime.
• The baseQuery atribuut – määrab kõigi API-päringute baas-URL-i, mis kasutavad fetchBaseQuery Reduxi tööriistakomplekti pakutav funktsioon.
• API lõpp-punktid - määrake selle API-lõigu jaoks saadaolevad lõpp-punktid, kasutades ehitaja objektiks. Sel juhul määratleb kood kaks lõpp-punkti.

Lõpuks genereeritakse sellest kaks konksu productsAPI objekt, mis identifitseerib kaks lõpp-punkti. Saate neid konksu kasutada erinevates Reacti komponentides API päringute tegemiseks, andmete toomiseks ja oleku muutmiseks vastuseks kasutaja interaktsioonile.

See lähenemisviis lihtsustab olekuhaldust ja andmete toomist rakenduses React.

Seadistage Reduxi pood

Pärast API-st andmete toomist salvestab RTK Query andmed Reduxi poodi vahemällu. Sel juhul toimib pood keskse jaoturina Reactist tehtud API päringute oleku haldamiseks. rakendus, sealhulgas nendest API päringutest hangitud andmed, mis tagavad komponentidele juurdepääsu ja nende andmete värskendamise vaja.

Looge src kataloogis a store.js faili ja lisage järgmised koodiread:

importida { configureStore } alates"@reduxjs/tööriistakomplekt";
importida { productsApi } alates"./features/apiSlice";
eksportidakonst store = configureStore({
 reduktor: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 vahevara: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

See kood loob uue Reduxi poe, millel on kaks peamist konfiguratsiooniosa:

1. Reduktor: see määrab, kuidas pood peaks oleku värskendusi käsitlema. Sel juhul on tootedApi.reduktor edastatakse reduktorfunktsioonina ja sellele antakse ainulaadne reduktorPath võti, mis tuvastab selle poe üldises olekus.
2. Vahevara: see määratleb mis tahes täiendava vahevara, mis peaks poele kehtima.

Saadud poodi objekt on täielikult konfigureeritud Reduxi pood, mida saab kasutada rakenduse oleku haldamiseks.

Sel viisil poodi konfigureerides saab rakendus hõlpsasti hallata API päringute olekut ja töödelda nende tulemusi standardiseeritud viisil Reduxi tööriistakomplekti abil.

Looge RTK funktsionaalsuse rakendamiseks komponent

Looge src kataloogis uus komponendid kaust, mille sees on uus fail: Data.js.

Lisage see kood faili Data.js:

importida { useGetAllProductsQuery } alates"../features/apiSlice";
importida Reageerige, { useState } alates"reageerida";
importida"./product.component.css";
eksportidakonst Andmed = () => {
konst { data, error, isLoading, refetch } = useGetAllProductsQuery();
konst [productsData, setProductsData] = useState([]);
konst handDisplayData = () => {
 refetch();
 setProductsData (andmed?.tooted);
 };
tagasi (
"tootekonteiner">
"toote nupp" onClick={handleDisplayData}>
 Kuva andmed
 </button>
 {is laadib && <div>Laadimine...div>}
 {viga && <div>Viga: {error.message}div>}
"tootemärgis">Tooted:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4.map((toode) => (
"toote üksikasjad" key={product.id}>
Nimi: {product.title}</p>

Kirjeldus: {product.description}</p>

Hind: {toode.hind}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

See kood demonstreerib Reacti komponenti, mis kasutab API-lõigu pakutavat useGetAllProductsQuery konksu andmete toomiseks määratud API lõpp-punktist.

Kui kasutaja klõpsab nuppu Kuva andmed, käivitub funktsioon handleDisplayData, mis saadab API-le HTTP-päringu tooteandmete toomiseks. Kui vastus on laekunud, värskendatakse toodete andmemuutujat vastuse andmetega. Lõpuks esitab komponent toote üksikasjade loendi.

Värskendage rakenduse komponenti

Tehke faili App.js koodis järgmised muudatused.

importida"./App.css";
importida { Andmed } alates"./components/Data";
importida {pood } alates"./pood";
importida { Pakkuja } alates"react-redux";
importida { ApiProvider } alates"@reduxjs/toolkit/query/react";
importida { productsApi } alates"./features/apiSlice";
funktsiooniRakendus() {
tagasi (


"Rakendus">

 </div>
 </ApiProvider>
 </Provider>
 );
}
eksportidavaikimisi Rakendus;

See kood mähib andmekomponendi kahe pakkujaga. Need kaks pakkujat annavad komponendile juurdepääsu Reduxi poele ja RTK päringu funktsioonidele, võimaldades sellel API-st andmeid tuua ja kuvada.

Reduxi tööriistakomplekti päringut on lihtne konfigureerida, et tõhusalt hankida andmeid määratud allikast minimaalse koodiga. Lisaks saate lisada funktsioone salvestatud andmete muutmiseks, määratledes API komponendis mutatsiooni lõpp-punktid.

Kombineerides Reduxi funktsioonid RTK andmete toomise võimalustega, saate oma Reacti veebirakendustele tervikliku olekuhalduslahenduse.