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

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

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

Предпосылки

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

npm install axios

Начнем с создания нового файла с именем 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хук. Этот эффект отвечает за кэширование данных в локальном хранилище всякий раз, когда dataизменяется переменная состояния. Вот что он делает:

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

Использование 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возвращает объект с тремя переменными состояния: loading, error, и data. Мы деструктурируем эти переменные и используем их для условной визуализации сообщения о загрузке, сообщения об ошибке или извлеченных данных.

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

Заключение

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

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