Реагировать на Js-хуки

useFetch Перехват в React с кэшированием

Если вы создаете приложение React, которое извлекает данные из API, вы можете снова и снова писать один и тот же код для обработки состояний загрузки, ошибок и данных.

Пользовательский хук может помочь вам избежать дублирования и сделать ваш код более модульным и пригодным для повторного использования.

В этой статье мы рассмотрим, как реализовать хук useFetch в React, который использует Axios для выборки данных и поддерживает кэширование, чтобы избежать ненужных сетевых запросов. К концу этой статьи у вас будет собственный хук, который вы сможете использовать в своих собственных проектах React.

Предпосылки

Прежде чем мы начнем, вы должны иметь некоторое представление о React и хуках. Вам также потребуется установить Axios в вашем проекте. Если вы еще этого не сделали, вы можете установить его, выполнив следующую команду:

npm install axios

Крюк useFetch

Начнем с создания нового файла с именем useFetch.js. Здесь мы определим наш пользовательский хук.

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;

Давайте рассмотрим этот код шаг за шагом.

Сначала мы импортируем хуки useState и useEffect из React, а также Axios.

Затем мы определяем наш пользовательский хук с именем useFetch. Этот хук принимает два аргумента: URL-адрес для извлечения и необязательный объект, содержащий параметры Axios, такие как заголовки, параметры запроса и т. д.

Внутри хука useFetch мы определяем три переменные состояния, используя хук useState: loading, error и data. Эти переменные будут отслеживать состояние загрузки, любые ошибки, возникающие во время выборки, и полученные данные соответственно.

Затем мы определяем эффект с помощью хука useEffect. Этот эффект отвечает за получение данных и соответствующее обновление переменных состояния. Вот что он делает:

  1. Он определяет асинхронную функцию с именем fetchData, которая отправляет запрос Axios GET на указанный URL-адрес с указанными параметрами.
  2. Если запрос выполнен успешно, он обновляет переменную состояния data данными ответа и устанавливает для loading значение false.
  3. Если возникает ошибка, он обновляет переменную состояния error с ошибкой и устанавливает loading в false.
  4. Он проверяет, кэшированы ли данные уже в локальном хранилище. Если это так, он устанавливает переменную состояния data в кэшированные данные и устанавливает loading в false. Если это не так, он вызывает функцию fetchData для получения данных.

Хук useEffect принимает массив зависимостей в качестве второго аргумента. В данном случае мы включаем переменные url и options в качестве зависимостей. Это гарантирует, что эффект запускается всякий раз, когда изменяется URL-адрес или параметры, что необходимо для получения правильных данных.

Наконец, мы определяем еще один эффект, используя хук useEffect. Этот эффект отвечает за кэширование данных в локальном хранилище всякий раз, когда изменяется переменная состояния data. Вот что он делает:

  1. Он проверяет, является ли data правдивым (т. е. не null, undefined или false). Если это так, он сохраняет данные в локальном хранилище, используя метод localStorage.setItem.
  2. Эффект работает только при изменении переменных data или url.

В конце хука мы возвращаем объект, содержащий переменные состояния loading, error и data. Это позволяет компоненту, использующему хук useFetch, получить доступ к состоянию загрузки, любым возникающим ошибкам и извлеченным данным.

Использование крючка useFetch

Теперь, когда мы определили наш пользовательский хук, давайте посмотрим, как использовать его в компоненте.

Вот пример компонента, который использует хук useFetch для получения данных из 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;

В этом примере мы импортируем хук useFetch из файла useFetch.js, который мы создали ранее. Затем мы вызываем хук useFetch с URL-адресом, который мы хотим получить (https://jsonplaceholder.typicode.com/posts).

Хук useFetch возвращает объект с тремя переменными состояния: loading, error и data. Мы деструктурируем эти переменные и используем их для условной визуализации сообщения о загрузке, сообщения об ошибке или извлеченных данных.

Если loading истинно, мы отображаем простое сообщение о загрузке. Если error соответствует действительности, мы отображаем сообщение об ошибке с текстом сообщения об ошибке. Если data соответствует действительности, мы отображаем полученные данные в виде неупорядоченного списка.

Заключение

В этой статье мы рассмотрели, как реализовать хук useFetch в React с поддержкой кэширования с помощью Axios. Этот настраиваемый хук позволяет получать данные из API и обрабатывать загрузку, ошибки и состояния данных модульным и многоразовым способом. Мы также показали, как использовать хук useFetch в компоненте для извлечения данных и их условного рендеринга на основе состояния загрузки и ошибки.

С помощью этого хука useFetch вы можете легко получать данные из API в своих проектах React, сохраняя при этом свой код организованным и простым в обслуживании.