Si está creando una aplicación React que obtiene datos de una API, es posible que se encuentre escribiendo un código similar una y otra vez para manejar los estados de carga, error y datos.

Un enlace personalizado puede ayudarlo a evitar esta duplicación y hacer que su código sea más modular y reutilizable.

En este artículo, exploraremos cómo implementar un useFetchenlace en React que use Axios para obtener datos y admita el almacenamiento en caché para evitar solicitudes de red innecesarias. Al final de este artículo, tendrá un gancho personalizado que puede usar en sus propios proyectos de React.

requisitos previos

Antes de comenzar, debe estar familiarizado con React y los ganchos. También necesitará tener Axios instalado en su proyecto. Si aún no lo ha hecho, puede instalarlo ejecutando el siguiente comando:

npm install axios

Comencemos creando un nuevo archivo llamado useFetch.js. Aquí es donde definiremos nuestro gancho personalizado.

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;

Primero, importamos los ganchos useStatey useEffectde React, así como de Axios.

A continuación, definimos nuestro gancho personalizado llamado useFetch. Este enlace toma dos argumentos: la URL para obtener y un objeto opcional que contiene opciones de Axios, como encabezados, parámetros de consulta, etc.

Dentro del useFetchgancho, definimos tres variables de estado usando el useStategancho: loading, errory data. Estas variables realizarán un seguimiento del estado de carga, cualquier error que ocurra durante la recuperación y los datos obtenidos, respectivamente.

A continuación, definimos un efecto usando el useEffectgancho. Este efecto es responsable de obtener los datos y actualizar las variables de estado en consecuencia. Esto es lo que hace:

1. Define una función asincrónica llamada fetchDataque realiza una solicitud GET de Axios a la URL especificada con las opciones especificadas.
2. Si la solicitud tiene éxito, actualiza la datavariable de estado con los datos de respuesta y se establece loadingen falso.
3. Si ocurre un error, actualiza la errorvariable de estado con el error y se establece loadingen falso.
4. Comprueba si los datos ya están almacenados en caché en el almacenamiento local. Si es así, establece la datavariable de estado en los datos almacenados en caché y los establece loadingen falso. Si no es así, llama a la fetchDatafunción para obtener los datos.

Finalmente, definimos otro efecto usando el useEffectgancho. Este efecto es responsable de almacenar en caché los datos en el almacenamiento local cada vez que datacambia la variable de estado. Esto es lo que hace:

1. Comprueba si dataes veraz (es decir, no null, undefinedo false). Si es así, almacena los datos en el almacenamiento local utilizando el localStorage.setItemmétodo.
2. El efecto solo se ejecuta cuando cambian las variables datao url.

Usando el useFetchgancho

Ahora que hemos definido nuestro enlace personalizado, veamos cómo usarlo en un componente.

Aquí hay un componente de ejemplo que usa el useFetchenlace para obtener datos de una 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;

El useFetchgancho devuelve un objeto con tres variables de estado: loading, errory data. Desestructuramos estas variables y las usamos para representar condicionalmente un mensaje de carga, un mensaje de error o los datos obtenidos.

Si loadinges verdadero, mostramos un mensaje de carga simple. Si errores cierto, mostramos un mensaje de error con el texto del mensaje de error. Si dataes cierto, representamos los datos obtenidos como una lista desordenada.

Conclusión

En este artículo, hemos explorado cómo implementar un useFetchgancho en React con soporte de almacenamiento en caché usando Axios. Este enlace personalizado le permite obtener datos de una API y manejar los estados de carga, error y datos de una manera modular y reutilizable. También mostramos cómo usar el useFetchgancho en un componente para obtener datos y representarlos condicionalmente en función de los estados de carga y error.

Con este useFetchenlace, puede obtener fácilmente datos de una API en sus proyectos de React mientras mantiene su código organizado y fácil de mantener.