Se stai creando un'app React che recupera i dati da un'API, potresti ritrovarti a scrivere codice simile più e più volte per gestire il caricamento, l'errore e gli stati dei dati.

Un hook personalizzato può aiutarti a evitare questa duplicazione e rendere il tuo codice più modulare e riutilizzabile.

In questo articolo, esploreremo come implementare un useFetchhook in React che utilizza Axios per recuperare i dati e supporta la memorizzazione nella cache per evitare richieste di rete non necessarie. Entro la fine di questo articolo, avrai un hook personalizzato che puoi utilizzare nei tuoi progetti React.

Prerequisiti

Prima di iniziare, dovresti avere una certa familiarità con React e gli hook. Dovrai anche avere Axios installato nel tuo progetto. Se non lo hai già fatto, puoi installarlo eseguendo il seguente comando:

npm install axios

Iniziamo creando un nuovo file chiamato useFetch.js. Qui è dove definiremo il nostro hook personalizzato.

import { useState, useEffect } from 'react';
import axios from 'axios';

const useFetch = (url, options = {}) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url, options);

        setData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    const cacheData = localStorage.getItem(url);
    if (cacheData) {
      setData(JSON.parse(cacheData));
      setLoading(false);
    } else {
      fetchData();
    }
  }, [url, options]);

  useEffect(() => {
    if (data) {
      localStorage.setItem(url, JSON.stringify(data));
    }
  }, [data, url]);

  return { loading, error, data };
};

export default useFetch;

Innanzitutto, importiamo gli hook useStatee useEffectda React, oltre che da Axios.

Successivamente, definiamo il nostro hook personalizzato chiamato useFetch. Questo hook accetta due argomenti: l'URL da recuperare e un oggetto facoltativo contenente opzioni Axios come intestazioni, parametri di query e così via.

All'interno dell'hook useFetch, definiamo tre variabili di stato usando l' useStatehook: loading, error, e data. Queste variabili terranno traccia rispettivamente dello stato di caricamento, di eventuali errori che si verificano durante il recupero e dei dati recuperati.

Successivamente, definiamo un effetto usando il useEffectgancio. Questo effetto è responsabile del recupero dei dati e dell'aggiornamento delle variabili di stato di conseguenza. Ecco cosa fa:

1. Definisce una funzione asincrona chiamata fetchDatache effettua una richiesta Axios GET all'URL specificato con le opzioni specificate.
2. Se la richiesta ha esito positivo, aggiorna la datavariabile di stato con i dati della risposta e la imposta loadingsu false.
3. Se si verifica un errore, aggiorna la errorvariabile di stato con l'errore e imposta loadingsu false.
4. Controlla se i dati sono già memorizzati nella cache nella memoria locale. Se lo è, imposta la datavariabile di stato sui dati memorizzati nella cache e imposta loadingsu false. In caso contrario, chiama la fetchDatafunzione per recuperare i dati.

Infine, definiamo un altro effetto usando il useEffectgancio. Questo effetto è responsabile della memorizzazione nella cache dei dati nella memoria locale ogni volta che la datavariabile di stato cambia. Ecco cosa fa:

1. Controlla se dataè veritiero (cioè non null, undefined, o false). Se lo è, memorizza i dati nella memoria locale utilizzando il localStorage.setItemmetodo.
2. L'effetto viene eseguito solo quando le variabili datao urlcambiano.

Usando il useFetchgancio

Ora che abbiamo definito il nostro hook personalizzato, vediamo come usarlo in un componente.

Ecco un componente di esempio che utilizza l' useFetchhook per recuperare i dati da un'API:

import useFetch from './useFetch';

const MyComponent = () => {
  const { loading, error, data } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

L' useFetchhook restituisce un oggetto con tre variabili di stato: loading, error, e data. Destrutturiamo queste variabili e le usiamo per eseguire il rendering condizionale di un messaggio di caricamento, di un messaggio di errore o dei dati recuperati.

Se loadingè vero, rendiamo un semplice messaggio di caricamento. Se errorè vero, rendiamo un messaggio di errore con il testo del messaggio di errore. Se dataè veritiero, rendiamo i dati recuperati come un elenco non ordinato.

Conclusione

In questo articolo, abbiamo esplorato come implementare un useFetchhook in React con il supporto della memorizzazione nella cache utilizzando Axios. Questo hook personalizzato consente di recuperare i dati da un'API e gestire il caricamento, l'errore e gli stati dei dati in modo modulare e riutilizzabile. Abbiamo anche mostrato come utilizzare l' useFetchhook in un componente per recuperare i dati ed eseguirne il rendering condizionato in base agli stati di caricamento e di errore.

Con questo useFetchhook, puoi facilmente recuperare i dati da un'API nei tuoi progetti React mantenendo il tuo codice organizzato e facile da mantenere.