Cum să preluați date în React utilizând Interogare Redux Toolkit

React este o bibliotecă JavaScript populară pentru construirea de interfețe cu utilizatorul pentru aplicații web. Când construiți o aplicație, este important să luați în considerare o abordare eficientă de gestionare a datelor pentru a vă asigura că preluați și redați datele în browser în mod corespunzător, ca răspuns la interacțiunile utilizatorului.

Cu toate acestea, gestionarea acestui proces poate deveni aparent o sarcină obositoare și predispusă la erori, mai ales dacă preluați date din mai multe surse și trebuie să actualizați în mod constant o serie de stări. În astfel de cazuri, Redux Toolkit Query oferă o soluție eficientă.

Interogare Redux Toolkit (RTK Query) este un instrument de preluare a datelor construit pe deasupra setului de instrumente Redux. Documentația sa oficială descrie RTK Query ca „un instrument puternic de preluare și stocare în cache a datelor, conceput pentru a simplifica cazuri obișnuite pentru încărcarea datelor într-o aplicație web, eliminând necesitatea de a scrie manual logica de preluare și stocare în cache a datelor tu".

În esență, oferă un set de caracteristici și capabilități care simplifică procesul de preluare și gestionare a datelor din API-uri sau din orice altă sursă de date dintr-o aplicație React.

Deși există asemănări între Redux Toolkit Query și React Query, un avantaj principal al Redux Toolkit Query este integrarea sa perfectă cu Redux, o bibliotecă de management de stat, permițând o soluție completă de preluare a datelor și de gestionare a stării pentru aplicațiile React atunci când sunt utilizate împreună.

Unele dintre caracteristicile de bază ale RTK includ stocarea în cache a datelor, o funcție de gestionare a interogărilor și gestionarea erorilor.

Pentru a începe, puteți crea rapid un proiect React la nivel local utilizând Creați aplicația React comanda.

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

Alternativ, puteți configurați un proiect React folosind Vite, un nou instrument de construcție și server de dezvoltare pentru aplicații web.

Puteți găsi codul acestui proiect în aceasta Depozitul GitHub.

Instalați dependențele necesare

După ce aveți proiectul React în funcțiune, mergeți mai departe și instalați următoarele pachete.

npm instalează @reduxjs/toolkit react-redux

Definiți o porțiune API

O porțiune API este o componentă care include logica Redux necesară pentru integrarea și interacțiunea cu punctele finale API specificate. Acesta oferă o modalitate standardizată de a defini atât punctele finale de interogare pentru preluarea datelor, cât și punctele finale de mutație pentru modificarea datelor.

În esență, o porțiune API vă permite să definiți punctele finale pentru solicitarea și efectuarea modificărilor datelor dintr-o anumită sursă, oferind o abordare simplificată a integrării cu API-urile.

În src director, creați un folder nou și denumiți-l, Caracteristici. În interiorul acestui folder, creați un fișier nou: apiSlice.jsși adăugați codul de mai jos:

import { createApi, fetchBaseQuery } din„@reduxjs/toolkit/query/react”;
exportconst productsApi = createApi({
 calea reductorului: "produseAp",
 baseQuery: fetchBaseQuery({ url de bază: " https://dummyjson.com/" }),
 puncte finale: (constructor) => ({
 getAllProducts: builder.query({
 interogare: () =>"produse",
 }),
 getProduct: builder.query({
 interogare: (produs) =>`produse/căutare? q=${produs}`, 
 }),
 }),
});
exportconst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Acest cod definește o porțiune API numită produseApi folosind setul de instrumente Redux createApi funcţie. Secțiunea API are următoarele proprietăți:

• A reductorPath proprietate - setează numele reductorului în magazinul Redux.
• The baseQuery proprietate - specifică adresa URL de bază pentru toate solicitările API care utilizează fetchBaseQuery funcție oferită de Redux Toolkit.
• API puncte finale - specificați punctele finale disponibile pentru această porțiune API folosind constructor obiect. În acest caz, codul definește două puncte finale.

În cele din urmă, sunt generate două cârlige din produseAPI obiect care identifică cele două puncte finale. Puteți folosi aceste cârlige în diferite componente React pentru a face solicitări API, pentru a prelua date și pentru a schimba starea ca răspuns la interacțiunea utilizatorului.

Această abordare simplifică gestionarea stării și preluarea datelor în aplicația React.

Configurați magazinul Redux

După preluarea datelor din API, RTK Query memorează în cache datele în magazinul Redux. Magazinul, în acest caz, servește ca un hub central pentru gestionarea stării solicitărilor API făcute din React aplicație, inclusiv datele preluate din acele solicitări API care asigură accesul componentelor și actualizarea acestor date ca Necesar.

În directorul src, creați un magazin.js fișier și adăugați următoarele linii de cod:

import { configureStore } din„@reduxjs/toolkit”;
import { productsApi } din„./features/apiSlice”;
exportconst magazin = configureStore({
 reductor: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Acest cod creează un nou magazin Redux, cu două componente principale de configurare:

1. Reductor: Aceasta definește modul în care magazinul ar trebui să gestioneze actualizările stării. În acest caz, produseApi.reductor este transmisă ca funcție de reducere și i se dă o cheie reducerPath unică pentru a o identifica în starea generală a magazinului.
2. Middleware: Aceasta definește orice middleware suplimentar care ar trebui să se aplice magazinului.

Rezultați magazin obiect este un magazin Redux complet configurat, care poate fi folosit pentru a gestiona starea aplicației.

Configurarea magazinului în acest fel, aplicația poate gestiona cu ușurință starea solicitărilor API și poate procesa rezultatele într-un mod standardizat folosind Redux Toolkit.

Creați o componentă pentru a implementa funcționalitatea RTK

În directorul src, creați un nou componente folder cu un fișier nou în interior: Data.js.

Adăugați acest cod în fișierul Data.js:

import { useGetAllProductsQuery } din„../features/apiSlice”;
import Reacționează, { useState } din"reacţiona";
import„./product.component.css”;
exportconst Date = () => {
const { date, error, isLoading, refetch } = useGetAllProductsQuery();
const [productsData, setProductsData] = useState([]);
const handleDisplayData = () => {
 refetch();
 setProductsData (date?.produse);
 };
întoarcere (
"container-produs">
"buton-produs" onClick={handleDisplayData}>
 Afișează date
 </button>
 {se incarca && <div>Se încarcă...div>}
 {eroare && <div>Eroare: {error.message}div>}
„etichetă-produs”>Produse:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).Hartă((produs) => (
"Detalii produs" cheie={product.id}>
Nume: {product.title}</p>

Descriere: {product.description}</p>

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

Acest cod demonstrează o componentă React care utilizează cârligul useGetAllProductsQuery furnizat de porțiunea API pentru a prelua date de la punctul final API specificat.

Când utilizatorul face clic pe butonul Display Data, funcția handleDisplayData se execută, trimițând o solicitare HTTP către API pentru a prelua datele despre produs. Odată primit răspunsul, variabila de date a produselor este actualizată cu datele de răspuns. În cele din urmă, componenta redă o listă cu detaliile produsului.

Actualizați componenta aplicației

Efectuați următoarele modificări la codul din fișierul App.js:

import„./App.css”;
import { Date } din„./components/Data”;
import { magazin } din"./magazin";
import { Furnizor } din"react-redux";
import { ApiProvider } din„@reduxjs/toolkit/query/react”;
import { productsApi } din„./features/apiSlice”;
funcţieApp() {
întoarcere (


„Aplicație”>

 </div>
 </ApiProvider>
 </Provider>
 );
}
exportMod implicit Aplicație;

Acest cod include componenta de date cu doi furnizori. Acești doi furnizori acordă acces componentei la magazinul Redux și la caracteristicile RTK Query, permițându-i să preia și să afișeze date din API.

Este ușor să configurați Redux Toolkit Query pentru a prelua în mod eficient datele dintr-o sursă specificată cu cod minim. Mai mult, puteți încorpora și funcții pentru a modifica datele stocate prin definirea punctelor finale de mutație în componenta API slice.

Combinând caracteristicile Redux cu abilitățile RTK de preluare a datelor, puteți obține o soluție cuprinzătoare de gestionare a stării pentru aplicațiile dvs. web React.