Ako získať dáta v React pomocou Redux Toolkit Query

React je populárna knižnica JavaScript na vytváranie používateľských rozhraní pre webové aplikácie. Pri vytváraní aplikácie je dôležité zvážiť efektívny prístup k správe údajov, aby ste zaistili správne načítanie a vykreslenie údajov v prehliadači v reakcii na interakcie používateľa.

Správa tohto procesu sa však môže zdanlivo stať zdĺhavou a náchylnou na chyby, najmä ak získavate údaje z viacerých zdrojov a potrebujete neustále aktualizovať množstvo stavov. V takýchto prípadoch poskytuje Redux Toolkit Query efektívne riešenie.

Dotaz Redux Toolkit (RTK Query) je nástroj na získavanie údajov postavený na súprave nástrojov Redux. Jeho oficiálna dokumentácia popisuje RTK Query ako „výkonný nástroj na získavanie údajov a ukladanie do vyrovnávacej pamäte navrhnutý na zjednodušenie bežné prípady načítania údajov vo webovej aplikácii, čím sa eliminuje potreba ručného zapisovania logiky načítania údajov a ukladania do vyrovnávacej pamäte seba“.

V podstate poskytuje súbor funkcií a schopností, ktoré zefektívňujú proces získavania a správy údajov z rozhraní API alebo akéhokoľvek iného zdroja údajov z aplikácie React.

Aj keď existujú podobnosti medzi Redux Toolkit Query a React Query, jednou z hlavných výhod Redux Toolkit Query je bezproblémová integrácia s Redux, štátna manažérska knižnica, čo umožňuje kompletné načítanie dát a riešenie správy stavu pre aplikácie React pri spoločnom použití.

Niektoré zo základných funkcií RTK zahŕňajú ukladanie údajov do vyrovnávacej pamäte, funkciu správy dotazov a spracovanie chýb.

Ak chcete začať, môžete rýchlo spustiť projekt React lokálne pomocou Vytvorte aplikáciu React príkaz.

mkdir React-RTQ
cd React-RTQ
npx create-react-app Reag-rtq-priklad
cd reagovat-rtq-príklad 
npm štart

Prípadne môžete nastaviť projekt React pomocou Vite, nový nástroj na zostavovanie a vývojový server pre webové aplikácie.

Kód tohto projektu nájdete v tomto úložisko GitHub.

Nainštalujte požadované závislosti

Keď budete mať svoj projekt React spustený a spustený, pokračujte a nainštalujte si nasledujúce balíčky.

npm install @reduxjs/toolkit response-redux

Definujte oblasť API

Rozhranie API je komponent, ktorý obsahuje potrebnú logiku Redux na integráciu a interakciu so špecifikovanými koncovými bodmi API. Poskytuje štandardizovaný spôsob, ako definovať koncové body dotazu na načítanie údajov a koncové body mutácie na úpravu údajov.

Rozhranie API vám v podstate umožňuje definovať koncové body na vyžiadanie a vykonávanie zmien v údajoch z konkrétneho zdroja, čo poskytuje zjednodušený prístup k integrácii s rozhraniami API.

V src adresár, vytvorte nový priečinok a pomenujte ho, Vlastnosti. V tomto priečinku vytvorte nový súbor: apiSlice.jsa pridajte kód nižšie:

importovať { createApi, fetchBaseQuery } od"@reduxjs/toolkit/query/react";
exportkonšt productsApi = createApi({
 Cesta redukcie: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 koncové body: (staviteľ) => ({
 getAllProducts: builder.query({
 dopyt: () =>"Produkty",
 }),
 getProduct: builder.query({
 dopyt: (produkt) =>`produkty/vyhľadávanie? q=${product}`, 
 }),
 }),
});
exportkonšt { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Tento kód definuje úsek API tzv produktyApi pomocou nástrojov Redux Toolkit createApi funkciu. Rozhranie API má nasledujúce vlastnosti:

• A Redukčná cesta vlastnosť - nastavuje názov reduktora v obchode Redux.
• The baseQuery vlastnosť - určuje základnú adresu URL pre všetky požiadavky API pomocou fetchBaseQuery funkcia poskytovaná Redux Toolkit.
• API koncové body - špecifikujte dostupné koncové body pre tento úsek API pomocou staviteľ objekt. V tomto prípade kód definuje dva koncové body.

Nakoniec sa vygenerujú dva háčiky productsAPI objekt, ktorý identifikuje dva koncové body. Tieto háčiky môžete použiť v rôznych komponentoch React na vytváranie požiadaviek API, získavanie údajov a zmenu stavu v reakcii na interakciu používateľa.

Tento prístup zjednodušuje správu stavu a získavanie údajov v aplikácii React.

Nakonfigurujte obchod Redux Store

Po načítaní údajov z API RTK Query uloží údaje do vyrovnávacej pamäte v obchode Redux. Obchod v tomto prípade slúži ako centrálny rozbočovač na správu stavu požiadaviek API uskutočnených z React aplikácie vrátane údajov získaných z týchto požiadaviek API zabezpečujúcich prístup komponentov a aktualizáciu týchto údajov ako potrebné.

V adresári src vytvorte a store.js súbor a pridajte nasledujúce riadky kódu:

importovať { configureStore } od"@reduxjs/toolkit";
importovať { productsApi } od"./features/apiSlice";
exportkonšt store = configureStore({
 redukcia: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Tento kód vytvára nový obchod Redux s dvoma hlavnými časťami konfigurácie:

1. Reduktor: Toto definuje, ako má obchod spracovávať aktualizácie stavu. V tomto prípade, produktyApi.reducer sa odovzdá ako funkcia redukcie a dostane jedinečný kľúč cesty redukcie, ktorý ju identifikuje v rámci celkového stavu obchodu.
2. Middleware: Toto definuje akýkoľvek ďalší middleware, ktorý by sa mal vzťahovať na obchod.

Výsledný obchod objekt je plne nakonfigurovaný obchod Redux, ktorý možno použiť na správu stavu aplikácie.

Nakonfigurovaním obchodu týmto spôsobom môže aplikácia jednoducho spravovať stav požiadaviek API a spracovávať ich výsledky štandardizovaným spôsobom pomocou Redux Toolkit.

Vytvorte komponent na implementáciu funkcie RTK

V adresári src vytvorte nový komponentov priečinok s novým súborom vo vnútri: Data.js.

Pridajte tento kód do súboru Data.js:

importovať { useGetAllProductsQuery } od"../features/apiSlice";
importovať Reagovať, { useState } od"reagovať";
importovať"./product.component.css";
exportkonšt Údaje = () => {
konšt { data, error, isLoading, refetch } = useGetAllProductsQuery();
konšt [productsData, setProductsData] = useState([]);
konšt handleDisplayData = () => {
 refetch ();
 setProductsData (data?.produkty);
 };
vrátiť (
"produkt-kontajner">
"tlačidlo produktu" onClick={handleDisplayData}>
 Zobraziť údaje
 </button>
 {isLoading && <div>Načítava...div>}
 {chyba && <div>Chyba: {error.message}div>}
"štítok produktu">Produkty:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).mapa((produkt) => (
"Detaily produktu" key={product.id}>
Názov: {product.title}</p>

Popis: {product.description}</p>

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

Tento kód demonštruje komponent React, ktorý používa hák useGetAllProductsQuery poskytovaný segmentom API na získanie údajov zo zadaného koncového bodu API.

Keď používateľ klikne na tlačidlo Zobraziť údaje, spustí sa funkcia handleDisplayData, ktorá odošle požiadavku HTTP do rozhrania API na získanie údajov o produkte. Po prijatí odpovede sa údajová premenná produktov aktualizuje údajmi o odpovedi. Nakoniec komponent vykreslí zoznam podrobností o produkte.

Aktualizujte komponent aplikácie

Vykonajte nasledujúce zmeny kódu v súbore App.js:

importovať"./App.css";
importovať { Údaje } od"./components/Data";
importovať { obchod } od"./obchod";
importovať { Poskytovateľ } od"react-redux";
importovať { ApiProvider } od"@reduxjs/toolkit/query/react";
importovať { productsApi } od"./features/apiSlice";
funkciuApp() {
vrátiť (


"aplikácia">

 </div>
 </ApiProvider>
 </Provider>
 );
}
exportpredvolená App;

Tento kód obalí komponent Data dvoma poskytovateľmi. Títo dvaja poskytovatelia udeľujú komponentu prístup k obchodu Redux a funkciám RTK Query, ktoré mu umožňujú získavať a zobrazovať údaje z API.

Je ľahké nakonfigurovať Redux Toolkit Query na efektívne získavanie údajov z určeného zdroja s minimálnym kódom. Okrem toho môžete tiež začleniť funkcie na úpravu uložených údajov definovaním koncových bodov mutácie v komponente segmentu API.

Kombináciou funkcií Reduxu so schopnosťami RTK získavať dáta môžete získať komplexné riešenie správy stavu pre vaše webové aplikácie React.