Tietojen noutaminen Reactissa Redux Toolkit -kyselyn avulla

React on suosittu JavaScript-kirjasto verkkosovellusten käyttöliittymien rakentamiseen. Sovellusta rakennettaessa on tärkeää harkita tehokasta tiedonhallintatapaa, jotta voit varmistaa, että noutat ja hahmonnat tiedot selaimessa asianmukaisesti käyttäjän vuorovaikutuksen perusteella.

Tämän prosessin hallinta voi kuitenkin näyttää olevan työläs ja virhealtis tehtävä, varsinkin jos haet tietoja useista lähteistä ja sinun on päivitettävä jatkuvasti useita tiloja. Tällaisissa tapauksissa Redux Toolkit Query tarjoaa tehokkaan ratkaisun.

Redux Toolkit -kysely (RTK Query) on tiedonhakutyökalu, joka on rakennettu Redux Toolkitin päälle. Sen virallisessa dokumentaatiossa kuvataan RTK Queryä "tehokkaaksi tiedonhaku- ja välimuistityökaluksi, joka on suunniteltu yksinkertaistamaan yleisiä tapauksia tietojen lataamiseen verkkosovellukseen, mikä eliminoi tarpeen kirjoittaa käsin tiedonhaku- ja välimuistilogiikka sinä itse".

Pohjimmiltaan se tarjoaa joukon ominaisuuksia ja ominaisuuksia, jotka virtaviivaistavat tietojen hakemista ja hallintaa sovellusliittymistä tai mistä tahansa muusta tietolähteestä React-sovelluksesta.

Vaikka Redux Toolkit Queryn ja React Queryn välillä on yhtäläisyyksiä, yksi Redux Toolkit Queryn tärkeimmistä eduista on sen saumaton integrointi Redux, valtionhallinnon kirjasto, joka mahdollistaa täydellisen tiedonhaun ja tilanhallintaratkaisun React-sovelluksille, kun niitä käytetään yhdessä.

Joitakin RTK: n ydinominaisuuksia ovat tiedon välimuisti, kyselynhallintaominaisuus ja virheiden käsittely.

Aloita kehittämällä React-projekti nopeasti paikallisesti käyttämällä Luo React-sovellus komento.

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

Vaihtoehtoisesti voit perustaa React-projekti Viten avulla, uusi rakennustyökalu ja kehityspalvelin web-sovelluksille.

Löydät tämän projektin koodin tästä GitHub-arkisto.

Asenna vaaditut riippuvuudet

Kun React-projektisi on valmis, asenna seuraavat paketit.

npm asennus @reduxjs/toolkit react-redux

Määritä API Slice

API-osio on komponentti, joka sisältää tarvittavan Redux-logiikan tiettyjen API-päätepisteiden kanssa integrointiin ja vuorovaikutukseen niiden kanssa. Se tarjoaa standardoidun tavan määrittää sekä kyselyn päätepisteet tietojen hakemista varten että mutaatiopäätepisteet tietojen muokkaamista varten.

Pohjimmiltaan API-osion avulla voit määrittää päätepisteet tietystä lähteestä peräisin olevien tietojen pyytämiseen ja muuttamiseen, mikä tarjoaa virtaviivaistetun lähestymistavan API-liittymiin.

Vuonna src hakemistoon, luo uusi kansio ja anna sille nimi, ominaisuudet. Luo tähän kansioon uusi tiedosto: apiSlice.jsja lisää alla oleva koodi:

tuonti { CreateApi, fetchBaseQuery } alkaen"@reduxjs/toolkit/query/react";
viedäkonst productsApi = createApi({
 vähennyspolku: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 päätepisteet: (rakentaja) => ({
 getAllProducts: builder.query({
 kysely: () =>"Tuotteet",
 }),
 getProduct: builder.query({
 kysely: (tuote) =>`tuotteet/haku? q=${product}`, 
 }),
 }),
});
viedäkonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Tämä koodi määrittää API-osion nimeltä tuotteetApi käyttämällä Redux Toolkitiä luo Api toiminto. API-osio ottaa seuraavat ominaisuudet:

• A vähennyspolku ominaisuus - asettaa reduktorin nimen Redux-kaupassa.
• The baseQuery ominaisuus - määrittää perus-URL-osoitteen kaikille API-pyynnöille, jotka käyttävät fetchBaseQuery Redux Toolkit -toiminto.
• API päätepisteet - määritä käytettävissä olevat päätepisteet tälle API-osalle käyttämällä rakentaja esine. Tässä tapauksessa koodi määrittelee kaksi päätepistettä.

Lopuksi syntyy kaksi koukkua productsAPI objekti, joka tunnistaa kaksi päätepistettä. Voit käyttää näitä koukkuja erilaisissa React-komponenteissa API-pyyntöjen tekemiseen, tietojen hakemiseen ja tilan muuttamiseen käyttäjän vuorovaikutuksen perusteella.

Tämä lähestymistapa virtaviivaistaa tilanhallintaa ja tiedonhakua React-sovelluksessa.

Määritä Redux Store

Kun tiedot on noudettu API: sta, RTK Query tallentaa tiedot Redux-säilössä. Kauppa toimii tässä tapauksessa keskuskeskuksena Reactista tehtyjen API-pyyntöjen tilan hallinnassa. sovellus, mukaan lukien näistä API-pyynnöistä haetut tiedot, jotka varmistavat komponenttien pääsyn ja päivittämisen näihin tietoihin tarvittu.

Luo src-hakemistoon a store.js tiedosto ja lisää seuraavat koodirivit:

tuonti { configureStore } alkaen"@reduxjs/työkalupakki";
tuonti { productsApi } alkaen"./features/apiSlice";
viedäkonst store = configureStore({
 vähennysventtiili: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 väliohjelmisto: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Tämä koodi luo uuden Redux-myymälän, jossa on kaksi pääkokoonpanoa:

1. Vähentäjä: Tämä määrittää, kuinka kaupan tulee käsitellä tilan päivityksiä. Tässä tapauksessa tuotteetApi.reducer välitetään vähennystoimintona ja sille annetaan ainutlaatuinen reduktorPath-avain, joka tunnistaa sen myymälän yleistilassa.
2. Väliohjelmisto: Tämä määrittää kaikki muut väliohjelmistot, joita tulee soveltaa kauppaan.

Tuloksena oleva tallentaa objekti on täysin määritetty Redux-säilö, jota voidaan käyttää sovelluksen tilan hallintaan.

Tällä tavalla konfiguroimalla sovellus voi helposti hallita API-pyyntöjen tilaa ja käsitellä niiden tuloksia standardoidusti Redux Toolkit -työkalun avulla.

Luo komponentti RTK-toiminnallisuuden toteuttamiseksi

Luo src-hakemistoon uusi komponentit kansio, jonka sisällä on uusi tiedosto: Data.js.

Lisää tämä koodi Data.js-tiedostoon:

tuonti { useGetAllProductsQuery } alkaen"../features/apiSlice";
tuonti Reagoi, { useState } alkaen"reagoi";
tuonti"./product.component.css";
viedäkonst Data = () => {
konst { data, error, isLadataan, hae } = useGetAllProductsQuery();
konst [productsData, setProductsData] = useState([]);
konst handleDisplayData = () => {
 noutaa();
 setProductsData (data?.tuotteet);
 };
palata (
"tuotesäiliö">
"tuotepainike" onClick={handleDisplayData}>
 Näytä tiedot
 </button>
 {ladataan && <div>Ladataan...div>}
 {error && <div>Virhe: {error.message}div>}
"tuotemerkki">Tuotteet:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).kartta((tuote) => (
"tuotteen yksityiskohdat" key={product.id}>
Nimi: {product.title}</p>

Kuvaus: {product.description}</p>

Hinta: {tuote.hinta}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

Tämä koodi esittelee React-komponentin, joka käyttää API-osion tarjoamaa useGetAllProductsQuery-koukkua tietojen hakemiseen määritetystä API-päätepisteestä.

Kun käyttäjä napsauttaa Näytä tiedot -painiketta, handleDisplayData-toiminto suoritetaan ja lähettää HTTP-pyynnön API: lle tuotetietojen hakemiseksi. Kun vastaus on vastaanotettu, tuotteiden tietomuuttuja päivitetään vastaustiedoilla. Lopuksi komponentti näyttää luettelon tuotetiedoista.

Päivitä sovelluskomponentti

Tee seuraavat muutokset App.js-tiedoston koodiin:

tuonti"./App.css";
tuonti { Data } alkaen"./components/Data";
tuonti { kauppa } alkaen"./myymälä";
tuonti { Palveluntarjoaja } alkaen"react-redux";
tuonti { ApiProvider } alkaen"@reduxjs/toolkit/query/react";
tuonti { productsApi } alkaen"./features/apiSlice";
toimintoSovellus() {
palata (


"Sovellus">

 </div>
 </ApiProvider>
 </Provider>
 );
}
viedäoletuksena Sovellus;

Tämä koodi kääri Data-komponentin kahden palveluntarjoajan kanssa. Nämä kaksi toimittajaa myöntävät komponentille pääsyn Redux-säilöön ja RTK Query -ominaisuuksiin, jolloin se voi noutaa ja näyttää tietoja API: sta.

Redux Toolkit Queryn asetukset on helppo määrittää hakemaan tietoja tietystä lähteestä tehokkaasti minimaalisella koodilla. Lisäksi voit myös sisällyttää toimintoja, joilla muokataan tallennettuja tietoja määrittämällä mutaatiopäätepisteet API slice -komponentissa.

Yhdistämällä Reduxin ominaisuudet RTK: n tiedonhakukykyyn saat kattavan tilanhallintaratkaisun React-verkkosovelluksiisi.