Jak načíst data v Reactu pomocí Redux Toolkit Query

React je oblíbená JavaScriptová knihovna pro vytváření uživatelských rozhraní pro webové aplikace. Při sestavování aplikace je důležité zvážit efektivní přístup ke správě dat, abyste zajistili, že data v prohlížeči načtete a vykreslíte správně, v reakci na interakce uživatele.

Správa tohoto procesu se však může zdánlivě stát zdlouhavým a náchylným k chybám, zejména pokud načítáte data z více zdrojů a potřebujete neustále aktualizovat řadu stavů. V takových případech poskytuje Redux Toolkit Query efektivní řešení.

Redux Toolkit Query (RTK Query) je nástroj pro načítání dat postavený na sadě nástrojů Redux. Jeho oficiální dokumentace popisuje RTK Query jako „výkonný nástroj pro načítání dat a ukládání do mezipaměti navržený tak, aby zjednodušil běžné případy načítání dat ve webové aplikaci, což eliminuje potřebu ručního zápisu logiky načítání dat a ukládání do mezipaměti vy sám".

V podstatě poskytuje sadu funkcí a schopností, které zjednodušují proces načítání a správy dat z rozhraní API nebo jakéhokoli jiného zdroje dat z aplikace React.

I když existují podobnosti mezi Redux Toolkit Query a React Query, jednou z hlavních výhod Redux Toolkit Query je jeho bezproblémová integrace s Redux, státní řídící knihovna, což umožňuje kompletní načítání dat a řešení správy stavu pro aplikace React při společném použití.

Některé ze základních funkcí RTK zahrnují ukládání dat do mezipaměti, funkci správy dotazů a zpracování chyb.

Chcete-li začít, můžete rychle spustit projekt React lokálně pomocí Vytvořte aplikaci React příkaz.

mkdir React-RTQ
cd React-RTQ
npx create-react-app reagovat-rtq-example
cd reagovat-rtq-příklad 
npm start

Případně můžete nastavit projekt React pomocí Vite, nový nástroj pro sestavení a vývojový server pro webové aplikace.

Zde najdete kód tohoto projektu úložiště GitHub.

Nainstalujte požadované závislosti

Jakmile budete mít svůj projekt React spuštěný, pokračujte a nainstalujte si následující balíčky.

npm install @reduxjs/toolkit reagovat-redux

Definujte úsek API

Rozhraní API je komponenta, která zahrnuje nezbytnou logiku Redux pro integraci a interakci s určenými koncovými body API. Poskytuje standardizovaný způsob, jak definovat koncové body dotazu pro načítání dat a koncové body mutace pro úpravu dat.

Řez rozhraní API v podstatě umožňuje definovat koncové body pro vyžádání a provádění změn dat z určitého zdroje, což poskytuje zjednodušený přístup k integraci s rozhraními API.

V src adresář, vytvořte novou složku a pojmenujte ji, funkce. V této složce vytvořte nový soubor: apiSlice.jsa přidejte kód níže:

import { createApi, fetchBaseQuery } z"@reduxjs/toolkit/query/react";
vývozníkonst productsApi = createApi({
 Cesta redukce: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 koncové body: (stavitel) => ({
 getAllProducts: builder.query({
 dotaz: () =>"produkty",
 }),
 getProduct: builder.query({
 dotaz: (produkt) =>`produkty/hledat? q=${product}`, 
 }),
 }),
});
vývozníkonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Tento kód definuje úsek API nazývaný produktyApi pomocí Redux Toolkit createApi funkce. Řez API má následující vlastnosti:

• A Cesta reduktoru vlastnost - nastavuje název redukce v obchodě Redux.
• The baseQuery vlastnost - určuje základní URL pro všechny požadavky API pomocí fetchBaseQuery funkce poskytovaná Redux Toolkit.
• API koncové body - určete dostupné koncové body pro tento řez rozhraní API pomocí stavitel objekt. V tomto případě kód definuje dva koncové body.

Nakonec se z něj vygenerují dva háčky produktyAPI objekt, který identifikuje dva koncové body. Tyto háčky můžete použít v různých komponentách React k vytváření požadavků API, načítání dat a změně stavu v reakci na interakci uživatele.

Tento přístup zjednodušuje správu stavu a načítání dat v aplikaci React.

Nakonfigurujte obchod Redux Store

Po načtení dat z API ukládá RTK Query data do mezipaměti v úložišti Redux. Obchod v tomto případě slouží jako centrální rozbočovač pro správu stavu požadavků API podaných z React aplikace, včetně dat získaných z těchto požadavků API zajišťujících přístup komponent a aktualizaci těchto dat jako potřeboval.

V adresáři src vytvořte a store.js soubor a přidejte následující řádky kódu:

import { configureStore } z"@reduxjs/toolkit";
import { productsApi } z"./features/apiSlice";
vývozníkonst store = configureStore({
 redukce: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Tento kód vytvoří nový obchod Redux se dvěma hlavními částmi konfigurace:

1. Reduktor: Toto definuje, jak má obchod zpracovávat aktualizace stavu. V tomto případě je produktyApi.reducer je předán jako funkce reduktoru a je mu přidělen jedinečný klíč cesty redukce, který jej identifikuje v rámci celkového stavu obchodu.
2. Middleware: Toto definuje jakýkoli další middleware, který by se měl vztahovat na obchod.

Výsledná obchod objekt je plně nakonfigurované úložiště Redux, které lze použít ke správě stavu aplikace.

Nakonfigurováním obchodu tímto způsobem může aplikace snadno spravovat stav požadavků API a zpracovávat jejich výsledky standardizovaným způsobem pomocí sady nástrojů Redux.

Vytvořte komponentu pro implementaci funkce RTK

V adresáři src vytvořte nový komponenty složka s novým souborem uvnitř: Data.js.

Přidejte tento kód do souboru Data.js:

import { useGetAllProductsQuery } z"../features/apiSlice";
import Reagovat, { useState } z"reagovat";
import"./product.component.css";
vývozníkonst Údaje = () => {
konst { data, chyba, isLoading, refetch } = useGetAllProductsQuery();
konst [productsData, setProductsData] = useState([]);
konst handleDisplayData = () => {
 refetch();
 setProductsData (data?.produkty);
 };
vrátit se (
"produkt-kontejner">
"produkt-tlačítko" onClick={handleDisplayData}>
 Zobrazení dat
 </button>
 {isLoading && <div>Načítání...div>}
 {chyba && <div>Chyba: {error.message}div>}
"štítek produktu">Produkty:</label>
 {productsData && productsData.length > 0 && (


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

Popis: {product.description}</p>

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

Tento kód demonstruje komponentu React, která používá háček useGetAllProductsQuery poskytovaný segmentem API k načítání dat ze zadaného koncového bodu rozhraní API.

Když uživatel klepne na tlačítko Zobrazit data, spustí se funkce handleDisplayData a odešle požadavek HTTP do rozhraní API k načtení dat produktu. Jakmile je odpověď přijata, datová proměnná produktů se aktualizuje o data odezvy. Nakonec komponenta vykreslí seznam podrobností o produktu.

Aktualizujte komponentu aplikace

Proveďte následující změny kódu v souboru App.js:

import"./App.css";
import { Data } z"./components/Data";
import { obchod } z"./obchod";
import { Poskytovatel } z"react-redux";
import { ApiProvider } z"@reduxjs/toolkit/query/react";
import { productsApi } z"./features/apiSlice";
funkceAplikace() {
vrátit se (


"Aplikace">

 </div>
 </ApiProvider>
 </Provider>
 );
}
vývoznívýchozí Aplikace;

Tento kód obaluje komponentu Data dvěma poskytovateli. Tito dva poskytovatelé udělují komponentě přístup k úložišti Redux a funkcím RTK Query, které jí umožňují načítat a zobrazovat data z API.

Je snadné nakonfigurovat Redux Toolkit Query pro efektivní získávání dat ze zadaného zdroje s minimálním kódem. Kromě toho můžete také začlenit funkce pro úpravu uložených dat definováním koncových bodů mutace v komponentě řezu API.

Kombinací funkcí Reduxu se schopnostmi RTK načítání dat můžete získat komplexní řešení správy stavu pro vaše webové aplikace React.