A Redux Toolkit Query kiküszöbölheti az adatkezelési munkája nagy részét. Fedezze fel, hogyan.

A React egy népszerű JavaScript-könyvtár webes alkalmazások felhasználói felületének létrehozására. Egy alkalmazás létrehozásakor fontos figyelembe venni egy hatékony adatkezelési megközelítést, amely biztosítja, hogy a felhasználói interakciókra válaszul megfelelően lehessen lekérni és megjeleníteni az adatokat a böngészőben.

Ennek a folyamatnak a kezelése azonban látszólag fárasztó és hibás feladattá válhat, különösen akkor, ha több forrásból tölt le adatokat, és számos állapotot folyamatosan frissítenie kell. Ilyen esetekben a Redux Toolkit Query hatékony megoldást nyújt.

Redux Toolkit Query (RTK Query) egy adatlekérő eszköz, amely a Redux Toolkit tetejére épül. Hivatalos dokumentációja az RTK Queryt "hatékony adatlekérő és gyorsítótárazó eszközként írja le, amelyet az egyszerűsítésre terveztek gyakori esetek az adatok webalkalmazásba történő betöltésére, így nincs szükség kézzel írható adatlekérési és gyorsítótárazási logikára saját magad".

instagram viewer

Lényegében olyan funkciókat és képességeket biztosít, amelyek leegyszerűsítik az API-kból vagy bármely más adatforrásból származó adatok lekérésének és kezelésének folyamatát a React alkalmazásból.

Bár vannak hasonlóságok a Redux Toolkit Query és a React Query között, a Redux Toolkit Query egyik fő előnye a zökkenőmentes integráció Redux, állami vezetői könyvtár, amely teljes adatlekérést és állapotkezelési megoldást tesz lehetővé a React alkalmazásokhoz, ha együtt használják őket.

Az RTK néhány alapvető funkciója közé tartozik az adatgyorsítótár, a lekérdezéskezelő szolgáltatás és a hibakezelés.

A kezdéshez gyorsan felállíthat egy React projektet helyileg a React alkalmazás létrehozása parancs.

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

Alternatív megoldásként megteheti állítson be egy React projektet a Vite segítségével, egy új build eszköz és fejlesztő szerver webes alkalmazásokhoz.

A projekt kódját itt találja meg GitHub adattár.

Telepítse a szükséges függőségeket

Miután elindította a React projektet, telepítse a következő csomagokat.

npm install @reduxjs/toolkit react-redux

Határozzon meg egy API-szeletet

Az API szelet egy olyan összetevő, amely tartalmazza a szükséges Redux logikát a megadott API-végpontokkal való integrációhoz és az azokkal való interakcióhoz. Szabványosított módot biztosít mind a lekérdezési végpontok meghatározására az adatok lekéréséhez, mind a mutációs végpontok meghatározására az adatok módosításához.

Lényegében egy API-szelet lehetővé teszi a végpontok meghatározását egy adott forrásból származó adatok kéréséhez és módosításához, így egyszerűsített megközelítést biztosít az API-kkal való integrációhoz.

Ban,-ben src könyvtárat, hozzon létre egy új mappát, és nevezze el, jellemzők. Ebben a mappában hozzon létre egy új fájlt: apiSlice.js, és add hozzá az alábbi kódot:

import { CreateApi, fetchBaseQuery } tól től"@reduxjs/toolkit/query/react";
exportconst productsApi = createApi({
 reduktorPath: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),


 végpontok: (építész) => ({
 getAllProducts: builder.query({
 lekérdezés: () =>"Termékek",
 }),
 getProduct: builder.query({
 lekérdezés: (termék) =>`termékek/keresés? q=${product}`, 
 }),
 }),
});
exportconst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Ez a kód egy API-szeletet határoz meg termékekApi a Redux Toolkit segítségével CreateApi funkció. Az API szelet a következő tulajdonságokkal rendelkezik:

  • A reduktorPath tulajdonság - beállítja a reduktor nevét a Redux áruházban.
  • A baseQuery tulajdonság – megadja az alap URL-t az összes API-kéréshez a fetchBaseQuery a Redux Toolkit által biztosított funkció.
  • API végpontok - adja meg az API-szelet elérhető végpontjait a építész tárgy. Ebben az esetben a kód két végpontot határoz meg.

Végül két horog keletkezik a productsAPI objektum, amely azonosítja a két végpontot. Ezeket a hook-okat különféle React-összetevőkben használhatja API-kérések létrehozására, adatok lekérésére és az állapot megváltoztatására a felhasználó interakciójára válaszul.

Ez a megközelítés leegyszerűsíti az állapotkezelést és az adatlekérést a React alkalmazásban.

Konfigurálja a Redux Store-t

Az adatok API-ból való lekérése után az RTK Query a Redux tárolóban tárolja az adatokat. Az áruház ebben az esetben központi hubként szolgál a React-ból érkező API-kérések állapotának kezelésére. alkalmazást, beleértve az ezekből az API-kérésekből lekért adatokat, amelyek biztosítják az összetevők hozzáférését és az adatok frissítését szükséges.

Az src könyvtárban hozzon létre a store.js fájlt, és adja hozzá a következő kódsorokat:

import { configureStore } tól től"@reduxjs/toolkit";
import { productsApi } tól től"./features/apiSlice";
exportconst store = configureStore({
 csökkentő: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 köztes szoftver: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Ez a kód egy új Redux áruházat hoz létre, két fő konfigurációval:

  1. Csökkentő: Ez határozza meg, hogy az áruház hogyan kezelje az állapotfrissítéseket. Ebben az esetben a termékekApi.reduktor redukáló funkcióként kerül átadásra, és egyedi reduktorPath kulcsot kap, amely azonosítja azt az áruház általános állapotán belül.
  2. Köztes szoftver: Ez meghatároz minden további köztes szoftvert, amelynek az áruházra vonatkoznia kell.

A kapott bolt Az objektum egy teljesen konfigurált Redux tároló, amely az alkalmazás állapotának kezelésére használható.

Az áruház ilyen módon történő konfigurálásával az alkalmazás egyszerűen kezelheti az API kérések állapotát, és a Redux Toolkit segítségével szabványosított módon feldolgozhatja azok eredményeit.

Hozzon létre egy komponenst az RTK funkcionalitás megvalósításához

Az src könyvtárban hozzon létre egy újat alkatrészek mappa új fájllal: Data.js.

Adja hozzá ezt a kódot a Data.js fájlhoz:

import { useGetAllProductsQuery } tól től"../features/apiSlice";
import React, { useState } tól től"reagál";
import"./product.component.css";
exportconst Adatok = () => {
const { adat, hiba, betöltés, visszatöltés } = useGetAllProductsQuery();
const [productsData, setProductsData] = useState([]);


const handleDisplayData = () => {
 refetch();
 setProductsData (data?.products);
 };
Visszatérés (
"terméktároló">

Ez a kód egy React összetevőt mutat be, amely az API szelet által biztosított useGetAllProductsQuery hook segítségével kéri le az adatokat a megadott API-végpontról.

Amikor a felhasználó az Adatok megjelenítése gombra kattint, a handleDisplayData funkció végrehajtódik, és HTTP-kérést küld az API-nak a termékadatok lekérésére. A válasz beérkezése után a termékek adatváltozója frissül a válaszadatokkal. Végül az összetevő megjeleníti a termékadatok listáját.

Frissítse az alkalmazáskomponenst

Végezze el a következő módosításokat az App.js fájl kódjában:

import"./App.css";
import { Adat } tól től"./components/Data";
import { bolt } tól től"./bolt";
import { Szolgáltató } tól től"react-redux";
import { ApiProvider } tól től"@reduxjs/toolkit/query/react";
import { productsApi } tól től"./features/apiSlice";
funkcióApp() {
Visszatérés (


"Alkalmazás">

 </div>
 </ApiProvider>
 </Provider>
 );
}
exportalapértelmezett App;

Ez a kód két szolgáltatóval burkolja be a Data komponenst. Ez a két szolgáltató hozzáférést biztosít az összetevőnek a Redux tárolóhoz és az RTK Query szolgáltatásaihoz, lehetővé téve az adatok lekérését és megjelenítését az API-ból.

Könnyen konfigurálható a Redux Toolkit Query, hogy hatékonyan lekérje az adatokat egy megadott forrásból minimális kóddal. Ezenkívül funkciókat is beépíthet a tárolt adatok módosításához, ha mutációs végpontokat határoz meg az API szelet komponensben.

A Redux funkcióinak és az RTK adatlekérési képességeinek kombinálásával átfogó állapotkezelési megoldást kaphat React webalkalmazásaihoz.