Come recuperare i dati in React utilizzando la query Redux Toolkit

React è una popolare libreria JavaScript per la creazione di interfacce utente per applicazioni web. Quando si crea un'applicazione, è importante considerare un approccio efficiente alla gestione dei dati per garantire il recupero e il rendering dei dati nel browser in modo appropriato, in risposta alle interazioni dell'utente.

Tuttavia, la gestione di questo processo può apparentemente diventare un'attività noiosa e soggetta a errori, soprattutto se si recuperano dati da più fonti ed è necessario aggiornare costantemente un numero di stati. In questi casi, Redux Toolkit Query fornisce una soluzione efficiente.

Query Redux Toolkit (RTK Query) è uno strumento di recupero dati basato su Redux Toolkit. La sua documentazione ufficiale descrive RTK Query come "un potente strumento di recupero e memorizzazione nella cache dei dati progettato per semplificare casi comuni per il caricamento dei dati in un'applicazione Web, eliminando la necessità di scrivere a mano la logica di recupero e memorizzazione nella cache dei dati te stesso".

In sostanza, fornisce una serie di funzionalità e capacità che semplificano il processo di recupero e gestione dei dati dalle API o da qualsiasi altra fonte di dati da un'applicazione React.

Sebbene esistano somiglianze tra Redux Toolkit Query e React Query, uno dei principali vantaggi di Redux Toolkit Query è la sua perfetta integrazione con Redux, una libreria di gestione dello stato, consentendo una soluzione completa per il recupero dei dati e la gestione dello stato per le applicazioni React se utilizzate insieme.

Alcune delle funzionalità principali di RTK includono la memorizzazione nella cache dei dati, una funzionalità di gestione delle query e la gestione degli errori.

Per iniziare, puoi avviare rapidamente un progetto React in locale utilizzando il file Crea l'app React comando.

mkdir Reagire-RTQ
cd Reagire-RTQ
npx create-react-app react-rtq-example
cd react-rtq-esempio 
inizio npm

In alternativa, puoi impostare un progetto React utilizzando Vite, un nuovo strumento di compilazione e server di sviluppo per applicazioni web.

Puoi trovare il codice di questo progetto in questo Deposito GitHub.

Installa le dipendenze richieste

Una volta che il tuo progetto React è attivo e funzionante, vai avanti e installa i seguenti pacchetti.

npm install @reduxjs/toolkit react-redux

Definire una sezione API

Una sezione API è un componente che include la logica Redux necessaria per l'integrazione e l'interazione con gli endpoint API specificati. Fornisce un modo standardizzato per definire sia gli endpoint di query per il recupero dei dati che gli endpoint di mutazione per la modifica dei dati.

In sostanza, una sezione API consente di definire gli endpoint per richiedere e apportare modifiche ai dati da una determinata origine, fornendo un approccio semplificato all'integrazione con le API.

Nel src directory, creare una nuova cartella e nominarla, caratteristiche. All'interno di questa cartella, crea un nuovo file: apiSlice.jse aggiungi il codice qui sotto:

importare { createApi, fetchBaseQuery } da"@reduxjs/toolkit/query/reagire";
esportarecost prodottiApi = createApi({
 percorso riduttore: "prodottiAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 endpoint: (costruttore) => ({
 getAllProducts: builder.query({
 domanda: () =>"prodotti",
 }),
 getProdotto: builder.query({
 domanda: (Prodotto) =>`prodotti/ricerca? q=${prodotto}`, 
 }),
 }),
});
esportarecost { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Questo codice definisce una sezione API chiamata prodottiApi utilizzando Redux Toolkit createApi funzione. La slice API accetta le seguenti proprietà:

• UN reducerPath property - imposta il nome del riduttore nell'archivio Redux.
• IL baseQuery property - specifica l'URL di base per tutte le richieste API utilizzando il fetchBaseQuery funzione fornita da Redux Toolkit.
• API endpoint - specificare gli endpoint disponibili per questa sezione API utilizzando il file costruttore oggetto. In questo caso, il codice definisce due endpoint.

Infine, vengono generati due hook dal file prodottiAPI oggetto che identifica i due endpoint. Puoi utilizzare questi hook in vari componenti React per effettuare richieste API, recuperare dati e modificare lo stato in risposta all'interazione dell'utente.

Questo approccio semplifica la gestione dello stato e il recupero dei dati nell'applicazione React.

Configura l'archivio Redux

Dopo aver recuperato i dati dall'API, RTK Query memorizza nella cache i dati nell'archivio Redux. Lo store, in questo caso, funge da hub centrale per la gestione dello stato delle richieste API effettuate da React applicazione, inclusi i dati recuperati da quelle richieste API che garantiscono l'accesso ai componenti e aggiornano questi dati come necessario.

Nella directory src, crea un file store.js file e aggiungere le seguenti righe di codice:

importare { configuraStore } da"@reduxjs/toolkit";
importare {prodottiApi} da"./features/apiSlice";
esportarecost store = configureStore({
 riduttore: {
 [productsApi.reducerPath]: prodottiApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (prodottiApi.middleware),
});

Questo codice crea un nuovo negozio Redux, con due parti principali di configurazione:

1. Riduttore: definisce come l'archivio deve gestire gli aggiornamenti allo stato. In questo caso, il prodottiApi.reducer viene passato come funzione reducer e riceve una chiave univoca reducerPath per identificarlo all'interno dello stato generale del negozio.
2. Middleware: definisce eventuali middleware aggiuntivi da applicare allo store.

Il risultato negozio oggetto è un archivio Redux completamente configurato, che può essere utilizzato per gestire lo stato dell'applicazione.

Configurando lo store in questo modo, l'applicazione può facilmente gestire lo stato delle richieste API ed elaborarne i risultati in modo standardizzato utilizzando Redux Toolkit.

Creare un componente per implementare la funzionalità RTK

Nella directory src, crea un nuovo file componenti cartella con un nuovo file all'interno: Dati.js.

Aggiungi questo codice al file Data.js:

importare { useGetAllProductsQuery } da"../caratteristiche/apiSlice";
importare Reagisci, { useState } da"reagire";
importare"./prodotto.componente.css";
esportarecost Dati = () => {
cost { data, errore, isLoading, refetch } = useGetAllProductsQuery();
cost [productsData, setProductsData] = useState([]);
cost handleDisplayData = () => {
 recupero();
 setProductsData (dati?.prodotti);
 };
ritorno (
"prodotto-contenitore">
"pulsante prodotto" onClick={handleDisplayData}>
 Mostra dati
 </button>
 {è in caricamento && <div>Caricamento...div>}
 {errore && <div>Errore: {errore.messaggio}div>}
"etichetta-prodotto">Prodotti:</label>
 {productsData && productsData.length > 0 && (


 {datiprodotti.sezione(0, 4).carta geografica((Prodotto) => (
"Dettagli del prodotto" chiave={id.prodotto}>
Nome: {prodotto.titolo}</p>

Descrizione: {prodotto.descrizione}</p>

Prezzo: {prodotto.prezzo}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

Questo codice mostra un componente React che utilizza l'hook useGetAllProductsQuery fornito dalla slice API per recuperare i dati dall'endpoint API specificato.

Quando l'utente fa clic sul pulsante Visualizza dati, viene eseguita la funzione handleDisplayData, che invia una richiesta HTTP all'API per recuperare i dati del prodotto. Una volta ricevuta la risposta, la variabile dei dati dei prodotti viene aggiornata con i dati della risposta. Infine, il componente esegue il rendering di un elenco di dettagli del prodotto.

Aggiorna il componente dell'app

Apporta le seguenti modifiche al codice nel file App.js:

importare"./App.css";
importare { Dati } da"./componenti/Dati";
importare { negozio } da"./negozio";
importare { Fornitore } da"reagire-redux";
importare { Fornitore API } da"@reduxjs/toolkit/query/reagire";
importare {prodottiApi} da"./features/apiSlice";
funzioneApp() {
ritorno (


"App">

 </div>
 </ApiProvider>
 </Provider>
 );
}
esportarepredefinito Applicazione;

Questo codice esegue il wrapping del componente dati con due provider. Questi due provider concedono al componente l'accesso allo store Redux e alle funzionalità RTK Query, consentendogli di recuperare e visualizzare i dati dall'API.

È facile configurare Redux Toolkit Query per recuperare in modo efficiente i dati da una fonte specificata con un codice minimo. Inoltre, puoi anche incorporare funzioni per modificare i dati archiviati definendo gli endpoint di mutazione nel componente della sezione API.

Combinando le funzionalità di Redux con le capacità di recupero dei dati di RTK, puoi ottenere una soluzione completa di gestione dello stato per le tue applicazioni web React.