Redux Toolkit Query kan ta smärtan av mycket av ditt datahanteringsarbete. Upptäck hur.

React är ett populärt JavaScript-bibliotek för att bygga användargränssnitt för webbapplikationer. När du bygger en applikation är det viktigt att överväga en effektiv datahanteringsmetod för att säkerställa att du hämtar och renderar data i webbläsaren på rätt sätt, som svar på användarinteraktioner.

Men att hantera den här processen kan till synes bli en tråkig och felbenägen uppgift, särskilt om du hämtar data från flera källor och du behöver konsekvent uppdatera ett antal tillstånd. I sådana fall ger Redux Toolkit Query en effektiv lösning.

Redux Toolkit Query (RTK Query) är ett datahämtningsverktyg byggt ovanpå Redux Toolkit. Dess officiella dokumentation beskriver RTK Query som "ett kraftfullt verktyg för datahämtning och cachning utformat för att förenkla vanliga fall för att ladda data i en webbapplikation, vilket eliminerar behovet av att handskriva logik för datahämtning och cachning själv".

I huvudsak ger den en uppsättning funktioner och möjligheter som effektiviserar processen för att hämta och hantera data från API: er eller någon annan datakälla från en React-applikation.

instagram viewer

Även om det finns likheter mellan Redux Toolkit Query och React Query, är en huvudfördel med Redux Toolkit Query dess sömlösa integration med Redux, ett statligt förvaltningsbibliotek, vilket möjliggör en komplett datahämtning och tillståndshanteringslösning för React-applikationer när de används tillsammans.

Några av kärnfunktionerna i RTK inkluderar datacache, en frågehanteringsfunktion och felhantering.

För att komma igång kan du snabbt skapa ett React-projekt lokalt med hjälp av Skapa React App kommando.

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

Alternativt kan du skapa ett React-projekt med Vite, ett nytt verktyg och utvecklingsserver för webbapplikationer.

Du kan hitta detta projekts kod i denna GitHub-förråd.

Installera nödvändiga beroenden

När du har ditt React-projekt igång, fortsätt och installera följande paket.

npm installera @reduxjs/toolkit react-redux

Definiera en API-del

En API-del är en komponent som innehåller den nödvändiga Redux-logiken för att integrera med och interagera med specificerade API-slutpunkter. Det tillhandahåller ett standardiserat sätt att definiera både frågeslutpunkter för att hämta data och mutationsslutpunkter för att modifiera data.

I grund och botten låter ett API-segment dig definiera slutpunkterna för att begära och göra ändringar i data från en viss källa, vilket ger en strömlinjeformad metod för att integrera med API: er.

I den src katalog, skapa en ny mapp och namnge den, Funktioner. Skapa en ny fil i den här mappen: apiSlice.js, och lägg till koden nedan:

importera { createApi, fetchBaseQuery } från"@reduxjs/toolkit/query/react";
exporterakonst productsApi = createApi({
 reducerPath: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),


 slutpunkter: (byggare) => ({
 getAllProducts: builder.query({
 fråga: () =>"Produkter",
 }),
 getProduct: builder.query({
 fråga: (produkt) =>`produkter/sökning? q=${product}`, 
 }),
 }),
});
exporterakonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Denna kod definierar en API-del som kallas produkterApi med hjälp av Redux Toolkit skapaApi fungera. API-delen har följande egenskaper:

  • A reducerPath egenskap - ställer in namnet på reduceraren i Redux-butiken.
  • De baseQuery egenskap - anger basadressen för alla API-förfrågningar som använder fetchBaseQuery funktion som tillhandahålls av Redux Toolkit.
  • API slutpunkter - ange tillgängliga slutpunkter för denna API-del med hjälp av byggare objekt. I det här fallet definierar koden två slutpunkter.

Slutligen genereras två krokar från produkterAPI objekt som identifierar de två ändpunkterna. Du kan använda dessa krokar i olika React-komponenter för att göra API-förfrågningar, hämta data och ändra tillståndet som svar på användarens interaktion.

Detta tillvägagångssätt effektiviserar tillståndshanteringen och datahämtning i React-applikationen.

Konfigurera Redux Store

Efter att ha hämtat data från API: t cachar RTK Query data i Redux-arkivet. Butiken, i det här fallet, fungerar som ett centralt nav för att hantera tillståndet för API-förfrågningar från React applikation, inklusive data som hämtas från dessa API-förfrågningar som säkerställer att komponenter kommer åt och uppdaterar dessa data som behövs.

I src-katalogen skapar du en store.js fil och lägg till följande kodrader:

importera { configureStore } från"@reduxjs/verktygssats";
importera { productsApi } från"./features/apiSlice";
exporterakonst store = configureStore({
 reducerare: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 mellanvara: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Den här koden skapar en ny Redux-butik, med två huvudsakliga konfigurationsdelar:

  1. Reducerare: Detta definierar hur butiken ska hantera uppdateringar till staten. I det här fallet produkterApi.reducer skickas in som reducerfunktionen och ges en unik reducerPath-nyckel för att identifiera den i butikens övergripande tillstånd.
  2. Mellanvara: Detta definierar eventuell ytterligare mellanprogramvara som ska gälla för butiken.

Det resulterande Lagra object är en fullt konfigurerad Redux-butik som kan användas för att hantera applikationens tillstånd.

Genom att konfigurera butiken på detta sätt kan applikationen enkelt hantera tillståndet för API-förfrågningar och bearbeta deras resultat på ett standardiserat sätt med hjälp av Redux Toolkit.

Skapa en komponent för att implementera RTK-funktionaliteten

Skapa en ny i src-katalogen komponenter mapp med en ny fil inuti: Data.js.

Lägg till den här koden i filen Data.js:

importera { useGetAllProductsQuery } från"../features/apiSlice";
importera Reagera, { useState } från"reagera";
importera"./product.component.css";
exporterakonst Data = () => {
konst { data, error, isLoading, refetch } = useGetAllProductsQuery();
konst [productsData, setProductsData] = useState([]);


konst handleDisplayData = () => {
 återhämta();
 setProductsData (data?.produkter);
 };
lämna tillbaka (
"produkt-behållare">

Den här koden demonstrerar en React-komponent som använder useGetAllProductsQuery-kroken som tillhandahålls av API-delen för att hämta data från den angivna API-slutpunkten.

När användaren klickar på knappen Visa data, körs handleDisplayData-funktionen och skickar en HTTP-begäran till API: et för att hämta produktdata. När svaret har tagits emot uppdateras produktens datavariabel med svarsdata. Slutligen återger komponenten en lista med produktdetaljer.

Uppdatera appkomponenten

Gör följande ändringar i koden i filen App.js:

importera"./App.css";
importera { Data } från"./komponenter/Data";
importera { Lagra } från"./Lagra";
importera { Leverantör } från"reagera-redux";
importera { ApiProvider } från"@reduxjs/toolkit/query/react";
importera { productsApi } från"./features/apiSlice";
fungeraApp() {
lämna tillbaka (


"App">

 </div>
 </ApiProvider>
 </Provider>
 );
}
exporterastandard App;

Denna kod omsluter datakomponenten med två leverantörer. Dessa två leverantörer ger komponenten åtkomst till Redux-butiken och RTK Query-funktioner som gör att den kan hämta och visa data från API: et.

Det är enkelt att konfigurera Redux Toolkit Query för att effektivt hämta data från en angiven källa med minimal kod. Dessutom kan du också inkludera funktioner för att modifiera lagrad data genom att definiera mutationsslutpunkter i API-segmentkomponenten.

Genom att kombinera funktionerna i Redux med RTK: s datahämtningsförmåga kan du få en heltäckande tillståndshanteringslösning för dina React-webbapplikationer.