Redux Toolkit Query może złagodzić większość zadań związanych z zarządzaniem danymi. Dowiedz się, jak to zrobić.

React to popularna biblioteka JavaScript do budowy interfejsów użytkownika dla aplikacji internetowych. Podczas tworzenia aplikacji należy wziąć pod uwagę wydajne podejście do zarządzania danymi, aby zapewnić odpowiednie pobieranie i renderowanie danych w przeglądarce w odpowiedzi na interakcje użytkownika.

Jednak zarządzanie tym procesem może pozornie stać się żmudnym i podatnym na błędy zadaniem, zwłaszcza jeśli pobierasz dane z wielu źródeł i musisz konsekwentnie aktualizować wiele stanów. W takich przypadkach Redux Toolkit Query zapewnia wydajne rozwiązanie.

Zapytanie o zestaw narzędzi Redux (RTK Query) to narzędzie do pobierania danych zbudowane na bazie zestawu narzędzi Redux. Jego oficjalna dokumentacja opisuje RTK Query jako „potężne narzędzie do pobierania i buforowania danych zaprojektowane w celu uproszczenia typowe przypadki ładowania danych w aplikacji internetowej, eliminując potrzebę ręcznego pisania logiki pobierania i buforowania danych się".

instagram viewer

Zasadniczo zapewnia zestaw funkcji i możliwości, które usprawniają proces pobierania i zarządzania danymi z interfejsów API lub dowolnego innego źródła danych z aplikacji React.

Chociaż istnieją podobieństwa między Redux Toolkit Query i React Query, jedną z głównych zalet Redux Toolkit Query jest jego bezproblemowa integracja z Redux, biblioteka zarządzania stanem, umożliwiając kompletne rozwiązanie do pobierania danych i zarządzania stanem dla aplikacji React, gdy są używane razem.

Niektóre z podstawowych funkcji RTK obejmują buforowanie danych, funkcję zarządzania zapytaniami i obsługę błędów.

Aby rozpocząć, możesz szybko uruchomić projekt React lokalnie za pomocą Utwórz aplikację React Komenda.

mkdir React-RTQ
cd React-RTQ
npx utwórz-reaguj-aplikację-reaguj-rtq-przykład
cd reagowanie-rtq-przykład 
np start

Alternatywnie możesz skonfiguruj projekt React za pomocą Vite, nowe narzędzie do budowania i serwer deweloperski dla aplikacji internetowych.

Możesz znaleźć kod tego projektu w this Repozytorium GitHub.

Zainstaluj wymagane zależności

Gdy już uruchomisz swój projekt React, zainstaluj następujące pakiety.

npm zainstaluj @reduxjs/toolkit reaguj-redux

Zdefiniuj wycinek API

Wycinek API to komponent, który zawiera logikę Redux niezbędną do integracji i interakcji z określonymi punktami końcowymi API. Zapewnia znormalizowany sposób definiowania zarówno punktów końcowych zapytań do pobierania danych, jak i punktów końcowych mutacji do modyfikowania danych.

Zasadniczo wycinek API umożliwia zdefiniowanie punktów końcowych do żądania i wprowadzania zmian w danych z określonego źródła, zapewniając usprawnione podejście do integracji z interfejsami API.

w źródło katalog, utwórz nowy folder i nazwij go, cechy. Wewnątrz tego folderu utwórz nowy plik: apiSlice.jsi dodaj poniższy kod:

import { utwórz interfejs API, pobierzBaseQuery} z"@reduxjs/zestaw narzędzi/zapytanie/reaguj";
eksportkonst productsApi = utwórzApi({
 ścieżka reduktora: „ProduktyAp”,
 baseQuery: fetchBaseQuery({ podstawowy adres URL: " https://dummyjson.com/" }),


 punkty końcowe: (budowniczy) => ({
 getAllProducts: builder.query({
 zapytanie: () =>„produkty”,
 }),
 getProduct: builder.query({
 zapytanie: (produkt) =>`produkty/wyszukiwanie? q=${produkt}`, 
 }),
 }),
});
eksportkonst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Ten kod definiuje wycinek API o nazwie produktyApi przy użyciu zestawu narzędzi Redux utwórz API funkcjonować. Wycinek interfejsu API ma następujące właściwości:

  • A ścieżka reduktora właściwość - ustawia nazwę reduktora w sklepie Redux.
  • The Zapytanie bazowe właściwość — określa podstawowy adres URL dla wszystkich żądań API korzystających z fetchBaseQuery funkcja dostarczana przez Redux Toolkit.
  • API punkty końcowe - określ dostępne punkty końcowe dla tego wycinka interfejsu API, używając pliku budowniczy obiekt. W tym przypadku kod definiuje dwa punkty końcowe.

Na koniec generowane są dwa haki z pliku produktyAPI obiekt, który identyfikuje dwa punkty końcowe. Możesz używać tych haków w różnych komponentach React do wysyłania żądań API, pobierania danych i zmiany stanu w odpowiedzi na interakcję użytkownika.

Takie podejście usprawnia zarządzanie stanem i pobieranie danych w aplikacji React.

Skonfiguruj sklep Redux

Po pobraniu danych z API, RTK Query buforuje dane w sklepie Redux. Sklep w tym przypadku służy jako centralny hub do zarządzania stanem zapytań API wysyłanych z React aplikacji, w tym danych pobranych z tych żądań API zapewniających komponentom dostęp i aktualizację tych danych jako potrzebne.

W katalogu src utwórz plik sklep.js plik i dodaj następujące linie kodu:

import { KonfigurujSklep} z"@reduxjs/zestaw narzędzi";
import { productsApi } z"./features/apiSlice";
eksportkonst sklep = skonfiguruj magazyn ({
 reduktor: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 oprogramowanie pośrednie: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Ten kod tworzy nowy sklep Redux z dwoma głównymi elementami konfiguracji:

  1. Reduktor: Określa, w jaki sposób sklep powinien obsługiwać aktualizacje stanu. W tym przypadku produktyApi.reduktor jest przekazywana jako funkcja redukująca i otrzymuje unikatowy klucz reducerPath, który identyfikuje ją w ogólnym stanie sklepu.
  2. Oprogramowanie pośrednie: Definiuje wszelkie dodatkowe oprogramowanie pośrednie, które powinno mieć zastosowanie do sklepu.

Wynikowy sklep obiekt to w pełni skonfigurowany magazyn Redux, który może służyć do zarządzania stanem aplikacji.

Konfigurując sklep w ten sposób, aplikacja może w łatwy sposób zarządzać stanem zapytań API oraz przetwarzać ich wyniki w ustandaryzowany sposób za pomocą Redux Toolkit.

Utwórz komponent do implementacji funkcjonalności RTK

W katalogu src utwórz nowy składniki folder z nowym plikiem w środku: Data.js.

Dodaj ten kod do pliku Data.js:

import { useGetAllProductsQuery } z„../funkcje/apiSlice”;
import Reaguj, { stan użycia } z"reagować";
import"./produkt.komponent.css";
eksportkonst dane = () => {
konst {dane, błąd, ładowanie, ponowne pobranie} = useGetAllProductsQuery();
konst [DaneProduktów, ustawDaneProduktów] = useState([]);


konst handleDisplayData = () => {
 ponowne pobranie();
 setProductsData (dane?.produkty);
 };
powrót (
„pojemnik na produkt”>

Ten kod demonstruje komponent React, który wykorzystuje hak useGetAllProductsQuery dostarczony przez wycinek API do pobierania danych z określonego punktu końcowego API.

Gdy użytkownik kliknie przycisk Wyświetl dane, wykonywana jest funkcja handleDisplayData, wysyłając żądanie HTTP do interfejsu API w celu pobrania danych produktu. Po otrzymaniu odpowiedzi zmienna danych produktów jest aktualizowana o dane odpowiedzi. Na koniec komponent renderuje listę szczegółów produktu.

Zaktualizuj składnik aplikacji

Wprowadź następujące zmiany w kodzie w pliku App.js:

import"./Aplikacja.css";
import { Dane } z„./komponenty/dane”;
import { sklep } z"./sklep";
import { Dostawca } z„reakcja-redux”;
import { Dostawca API } z"@reduxjs/zestaw narzędzi/zapytanie/reaguj";
import { productsApi } z"./features/apiSlice";
funkcjonowaćAplikacja() {
powrót (


„Aplikacja”>

 </div>
 </ApiProvider>
 </Provider>
 );
}
eksportdomyślny Aplikacja;

Ten kod opakowuje komponent Data z dwoma dostawcami. Ci dwaj dostawcy przyznają komponentowi dostęp do sklepu Redux i funkcji RTK Query, umożliwiając mu pobieranie i wyświetlanie danych z interfejsu API.

Łatwo jest skonfigurować Redux Toolkit Query, aby efektywnie pobierać dane z określonego źródła przy minimalnym kodzie. Co więcej, możesz również włączyć funkcje do modyfikowania przechowywanych danych poprzez zdefiniowanie punktów końcowych mutacji w komponencie plasterka API.

Łącząc funkcje Redux z możliwościami pobierania danych RTK, możesz uzyskać kompleksowe rozwiązanie do zarządzania stanem dla swoich aplikacji internetowych React.