Jeśli tworzysz aplikację React, która pobiera dane z interfejsu API, może się okazać, że ciągle będziesz pisać podobny kod, aby obsłużyć ładowanie, błędy i stany danych.

Niestandardowy hak może pomóc uniknąć tego powielania i uczynić kod bardziej modułowym i nadającym się do wielokrotnego użytku.

W tym artykule przyjrzymy się, jak zaimplementować useFetchhak w React, który wykorzystuje Axios do pobierania danych i obsługuje buforowanie, aby uniknąć niepotrzebnych żądań sieciowych. Pod koniec tego artykułu będziesz mieć niestandardowy hak, którego możesz użyć we własnych projektach React.

Wymagania wstępne

Zanim zaczniemy, powinieneś zapoznać się z Reactem i hookami. Będziesz także musiał zainstalować Axios w swoim projekcie. Jeśli jeszcze tego nie zrobiłeś, możesz go zainstalować, uruchamiając następujące polecenie:

npm install axios

Zacznijmy od utworzenia nowego pliku o nazwie useFetch.js. Tutaj zdefiniujemy nasz niestandardowy hak.

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;

Najpierw importujemy hooki useStatei useEffectz Reacta, a także z Axios.

Następnie definiujemy nasz niestandardowy hak o nazwie useFetch. Ten hak przyjmuje dwa argumenty: adres URL do pobrania oraz opcjonalny obiekt zawierający opcje Axios, takie jak nagłówki, parametry zapytania i tak dalej.

Wewnątrz useFetchhaka definiujemy trzy zmienne stanu za pomocą useStatehaka: loading, error, i data. Te zmienne będą odpowiednio śledzić stan ładowania, wszelkie błędy występujące podczas pobierania i pobrane dane.

Następnie definiujemy efekt za pomocą useEffecthaka. Efekt ten jest odpowiedzialny za pobieranie danych i odpowiednią aktualizację zmiennych stanu. Oto, co robi:

1. Definiuje wywołaną funkcję asynchroniczną fetchData, która wysyła żądanie Axios GET do określonego adresu URL z określonymi opcjami.
2. Jeśli żądanie zakończy się pomyślnie, aktualizuje datazmienną stanu danymi odpowiedzi i ustawia loadingwartość false.
3. Jeśli wystąpi błąd, aktualizuje errorzmienną stanu za pomocą błędu i ustawia loadingwartość false.
4. Sprawdza, czy dane są już buforowane w pamięci lokalnej. Jeśli tak, ustawia datazmienną stanu na dane z pamięci podręcznej i ustawia loadingwartość false. Jeśli tak nie jest, wywołuje fetchDatafunkcję w celu pobrania danych.

Na koniec definiujemy kolejny efekt za pomocą useEffecthaka. Ten efekt jest odpowiedzialny za buforowanie danych w pamięci lokalnej za każdym razem, gdy datazmienia się zmienna stanu. Oto, co robi:

1. Sprawdza, czy datajest prawdziwy (tzn. nie null, undefined, lub false). Jeśli tak, przechowuje dane w magazynie lokalnym przy użyciu localStorage.setItemmetody.
2. Efekt działa tylko wtedy, gdy zmienią się zmienne datalub url.

Korzystanie z useFetchhaka

Teraz, gdy zdefiniowaliśmy nasz niestandardowy hak, zobaczmy, jak go użyć w komponencie.

Oto przykładowy komponent, który używa useFetchhaka do pobierania danych z interfejsu 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;

Hak useFetchzwraca obiekt z trzema zmiennymi stanu: loading, error, i data. Niszczymy te zmienne i używamy ich do warunkowego renderowania komunikatu ładowania, komunikatu o błędzie lub pobranych danych.

Jeśli loadingto prawda, renderujemy prosty komunikat ładowania. Jeśli errorjest prawdziwy, wyświetlamy komunikat o błędzie z tekstem komunikatu o błędzie. Jeśli datajest prawdziwy, renderujemy pobrane dane jako nieuporządkowaną listę.

Wniosek

W tym artykule zbadaliśmy, jak zaimplementować useFetchhak w React z obsługą buforowania za pomocą Axios. Ten niestandardowy hak umożliwia pobieranie danych z interfejsu API i obsługę ładowania, błędów i stanów danych w sposób modułowy i wielokrotnego użytku. Pokazaliśmy również, jak używać useFetchhaka w komponencie do pobierania danych i renderowania ich warunkowo na podstawie stanów ładowania i błędów.

Za pomocą tego useFetchhaka możesz łatwo pobierać dane z interfejsu API w swoich projektach React, jednocześnie utrzymując uporządkowany i łatwy w utrzymaniu kod.