„Redux Toolkit Query“ gali palengvinti didžiąją dalį duomenų tvarkymo darbų. Sužinokite, kaip.

„React“ yra populiari „JavaScript“ biblioteka, skirta žiniatinklio programų vartotojo sąsajoms kurti. Kuriant programą svarbu apsvarstyti veiksmingą duomenų valdymo metodą, kad būtų užtikrintas tinkamas duomenų gavimas ir pateikimas naršyklėje, atsižvelgiant į vartotojo sąveiką.

Tačiau šio proceso valdymas gali tapti varginančia ir klaidų reikalaujančia užduotimi, ypač jei renkate duomenis iš kelių šaltinių ir jums reikia nuosekliai atnaujinti keletą būsenų. Tokiais atvejais „Redux Toolkit Query“ yra efektyvus sprendimas.

„Redux“ įrankių rinkinio užklausa (RTK Query) yra duomenų gavimo įrankis, sukurtas „Redux Toolkit“ viršuje. Oficialioje dokumentacijoje RTK užklausa apibūdinama kaip „galingas duomenų gavimo ir talpyklos įrankis, skirtas supaprastinti dažni duomenų įkėlimo į žiniatinklio programą atvejai, todėl nereikia ranka rašyti duomenų gavimo ir talpyklos logikos save“.

Iš esmės jame pateikiamas funkcijų ir galimybių rinkinys, kuris supaprastina duomenų gavimo ir tvarkymo procesą iš API ar bet kurio kito duomenų šaltinio iš „React“ programos.

instagram viewer

Nors „Redux Toolkit Query“ ir „React Query“ yra panašumų, vienas iš pagrindinių „Redux Toolkit Query“ pranašumų yra sklandus integravimas su Redux, valstybės valdymo biblioteka, leidžiantis gauti visą duomenų gavimo ir būsenos valdymo sprendimą „React“ programoms, kai jos naudojamos kartu.

Kai kurios pagrindinės RTK funkcijos apima duomenų kaupimą talpykloje, užklausų valdymo funkciją ir klaidų tvarkymą.

Norėdami pradėti, galite greitai sukurti „React“ projektą vietoje naudodami Sukurkite programą „React“. komandą.

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd react-rtq-example 
npm pradžia

Arba galite nustatykite React projektą naudodami Vite, naujas žiniatinklio programų kūrimo įrankis ir kūrimo serveris.

Šio projekto kodą rasite čia GitHub saugykla.

Įdiekite reikiamas priklausomybes

Sukūrę ir paleidę React projektą, eikite į priekį ir įdiekite šiuos paketus.

npm įdiegti @reduxjs/toolkit react-redux

Apibrėžkite API skiltį

API dalis yra komponentas, apimantis būtiną Redux logiką, skirtą integruoti ir sąveikauti su nurodytais API galutiniais taškais. Jis suteikia standartizuotą būdą apibrėžti užklausos galutinius taškus duomenims gauti, ir mutacijos galinius taškus, skirtus duomenims keisti.

Iš esmės API skiltis leidžia apibrėžti galutinius taškus, skirtus duomenų užklausoms iš konkretaus šaltinio ir jų pakeitimams atlikti, taigi supaprastintas požiūris į integravimą su API.

Viduje src kataloge, sukurkite naują aplanką ir pavadinkite jį, funkcijos. Šiame aplanke sukurkite naują failą: apiSlice.jsir pridėkite žemiau esantį kodą:

importuoti { CreateApi, fetchBaseQuery } iš„@reduxjs/toolkit/query/react“;
eksportuotikonst productsApi = createApi({
 reduktoriusPath: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),


 galutiniai taškai: (statybininkas) => ({
 getAllProducts: builder.query({
 užklausa: () =>"Produktai",
 }),
 getProduct: builder.query({
 užklausa: (produktas) =>`produktai/paieška? q=${product}`, 
 }),
 }),
});
eksportuotikonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Šis kodas apibrėžia API skiltį, vadinamą produktaiApi naudojant Redux Toolkit's sukurti Api funkcija. API dalis turi šias ypatybes:

  • A reduktoriusPath ypatybė – nustato Redux parduotuvėje esančio reduktoriaus pavadinimą.
  • The baseQuery ypatybė – nurodo bazinį URL visoms API užklausoms naudojant fetchBaseQuery funkcija, kurią teikia Redux Toolkit.
  • API galutiniai taškai - nurodykite galimus šios API dalies galutinius taškus naudodami statybininkas objektas. Šiuo atveju kodas apibrėžia du galutinius taškus.

Galiausiai iš produktaiAPI objektas, identifikuojantis du galinius taškus. Galite naudoti šiuos kabliukus įvairiuose „React“ komponentuose, kad pateiktumėte API užklausas, gautumėte duomenis ir pakeistumėte būseną, reaguodami į vartotojo sąveiką.

Šis metodas supaprastina būsenos valdymą ir duomenų gavimą „React“ programoje.

Sukonfigūruokite „Redux Store“.

Gavusi duomenis iš API, „RTK Query“ išsaugo duomenis „Redux“ parduotuvėje. Šiuo atveju parduotuvė yra centrinis centras, skirtas valdyti API užklausų, pateiktų iš React, būseną. programa, įskaitant duomenis, gautus iš tų API užklausų, užtikrinančių prieigą prie komponentų ir atnaujinant šiuos duomenis kaip reikia.

src kataloge sukurkite a store.js failą ir pridėkite šias kodo eilutes:

importuoti { configureStore } iš„@reduxjs/įrankių rinkinys“;
importuoti { productsApi } iš"./features/apiSlice";
eksportuotikonst parduotuvė = configureStore({
 reduktorius: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 tarpinė programinė įranga: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Šis kodas sukuria naują „Redux“ parduotuvę su dviem pagrindinėmis konfigūracijos dalimis:

  1. Reduktorius: tai apibrėžia, kaip parduotuvė turėtų tvarkyti būsenos naujinimus. Šiuo atveju, produktaiApi.reduktorius yra perduodama kaip reduktoriaus funkcija ir jam suteikiamas unikalus reduktorius Path raktas, leidžiantis jį identifikuoti bendroje parduotuvės būsenoje.
  2. Tarpinė programinė įranga: tai apibrėžia bet kokią papildomą tarpinę programinę įrangą, kuri turėtų būti taikoma parduotuvei.

Gautas parduotuvė objektas yra visiškai sukonfigūruota „Redux“ saugykla, kurią galima naudoti programos būsenai valdyti.

Tokiu būdu sukonfigūravus parduotuvę, programa gali lengvai valdyti API užklausų būseną ir standartizuotu būdu apdoroti jų rezultatus naudojant Redux Toolkit.

Sukurkite komponentą, skirtą RTK funkcionalumui įgyvendinti

Src kataloge sukurkite naują komponentai aplankas su nauju failu: Data.js.

Pridėkite šį kodą prie Data.js failo:

importuoti { useGetAllProductsQuery } iš"../features/apiSlice";
importuoti Reaguoti, { useState } iš"reaguoti";
importuoti"./product.component.css";
eksportuotikonst Duomenys = () => {
konst { data, error, isloading, refetch } = useGetAllProductsQuery();
konst [productsData, setProductsData] = useState([]);


konst handDisplayData = () => {
 iš naujo ();
 setProductsData (duomenys?.produktai);
 };
grąžinti (
"produktas-konteineris">

Šis kodas demonstruoja „React“ komponentą, kuris naudoja „useGetAllProductsQuery“ kabliuką, kurį teikia API dalis, kad gautų duomenis iš nurodyto API galinio taško.

Kai vartotojas spustelėja mygtuką Rodyti duomenis, įvykdoma funkcija handleDisplayData ir siunčiama HTTP užklausa API, kad būtų galima gauti produkto duomenis. Gavus atsakymą, produktų duomenų kintamasis atnaujinamas atsakymo duomenimis. Galiausiai komponentas pateikia produkto informacijos sąrašą.

Atnaujinkite programos komponentą

Atlikite šiuos kodo pakeitimus App.js faile:

importuoti"./App.css";
importuoti { Duomenys } iš"./components/Data";
importuoti { parduotuvė } iš"./store";
importuoti { Teikėjas } iš"reaguoti-reduksas";
importuoti { ApiProvider } iš„@reduxjs/toolkit/query/react“;
importuoti { productsApi } iš"./features/apiSlice";
funkcijaProgramėlė() {
grąžinti (


"Programėlė">

 </div>
 </ApiProvider>
 </Provider>
 );
}
eksportuotinumatytas Programėlė;

Šis kodas apvynioja duomenų komponentą su dviem teikėjais. Šie du teikėjai suteikia komponentui prieigą prie „Redux“ parduotuvės ir „RTK Query“ funkcijų, leidžiančių gauti ir rodyti duomenis iš API.

Lengva sukonfigūruoti „Redux Toolkit Query“, kad būtų galima efektyviai gauti duomenis iš nurodyto šaltinio su minimaliu kodu. Be to, API skilties komponente apibrėždami mutacijos galinius taškus taip pat galite įtraukti saugomų duomenų modifikavimo funkcijas.

Sujungę Redux funkcijas su RTK duomenų gavimo galimybėmis, galite gauti visapusišką būsenos valdymo sprendimą savo React žiniatinklio programoms.