Nếu bạn đang xây dựng một ứng dụng React tìm nạp dữ liệu từ một API, bạn có thể thấy mình phải viết đi viết lại những đoạn mã tương tự để xử lý trạng thái tải, lỗi và dữ liệu.

Móc tùy chỉnh có thể giúp bạn tránh sự trùng lặp này và làm cho mã của bạn có tính mô-đun hơn và có thể tái sử dụng.

Trong bài viết này, chúng ta sẽ khám phá cách triển khai useFetchhook trong React sử dụng Axios để tìm nạp dữ liệu và hỗ trợ lưu vào bộ đệm để tránh các yêu cầu mạng không cần thiết. Đến cuối bài viết này, bạn sẽ có một hook tùy chỉnh mà bạn có thể sử dụng trong các dự án React của riêng mình.

điều kiện tiên quyết

Trước khi bắt đầu, bạn nên làm quen với React và hook. Bạn cũng sẽ cần cài đặt Axios trong dự án của mình. Nếu bạn chưa có, bạn có thể cài đặt nó bằng cách chạy lệnh sau:

npm install axios

Hãy bắt đầu bằng cách tạo một tệp mới có tên useFetch.js. Đây là nơi chúng tôi sẽ xác định hook tùy chỉnh của mình.

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;

Đầu tiên, chúng tôi nhập useStatevà useEffectmóc từ React, cũng như Axios.

Tiếp theo, chúng tôi xác định móc tùy chỉnh của mình có tên là useFetch. Móc nối này nhận hai đối số: URL để tìm nạp và một đối tượng tùy chọn chứa các tùy chọn Axios chẳng hạn như tiêu đề, tham số truy vấn, v.v.

Bên trong useFetchhook, chúng ta xác định ba biến trạng thái bằng cách sử dụng useStatehook: loading, error, và data. Các biến này sẽ theo dõi trạng thái tải, bất kỳ lỗi nào xảy ra trong quá trình tìm nạp và dữ liệu đã tìm nạp tương ứng.

Tiếp theo, chúng tôi xác định một hiệu ứng bằng useEffecthook. Hiệu ứng này chịu trách nhiệm tìm nạp dữ liệu và cập nhật các biến trạng thái tương ứng. Đây là những gì nó làm:

1. Nó định nghĩa một hàm không đồng bộ được gọi fetchDatalà tạo một yêu cầu GET của Axios tới URL đã chỉ định với các tùy chọn đã chỉ định.
2. Nếu yêu cầu thành công, nó sẽ cập nhật databiến trạng thái với dữ liệu phản hồi và đặt loadingthành false.
3. Nếu xảy ra lỗi, nó sẽ cập nhật errorbiến trạng thái có lỗi và đặt loadingthành false.
4. Nó kiểm tra xem dữ liệu đã được lưu trong bộ nhớ cục bộ chưa. Nếu đúng như vậy, nó sẽ đặt databiến trạng thái thành dữ liệu được lưu trong bộ nhớ cache và đặt loadingthành false. Nếu không, nó sẽ gọi fetchDatahàm để lấy dữ liệu.

Cuối cùng, chúng ta xác định một hiệu ứng khác bằng useEffecthook. Hiệu ứng này chịu trách nhiệm lưu trữ dữ liệu trong bộ nhớ cục bộ bất cứ khi nào databiến trạng thái thay đổi. Đây là những gì nó làm:

1. Nó kiểm tra xem có datađúng sự thật không (tức là không phải null, undefined, hoặc false). Nếu có, nó sẽ lưu trữ dữ liệu trong bộ nhớ cục bộ bằng phương localStorage.setItemthức.
2. Hiệu ứng chỉ chạy khi các biến datahoặc urlthay đổi.

Sử dụng useFetchmóc

Bây giờ chúng ta đã xác định hook tùy chỉnh của mình, hãy xem cách sử dụng nó trong một thành phần.

Đây là một thành phần ví dụ sử dụng useFetchhook để tìm nạp dữ liệu từ 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;

Móc useFetchtrả về một đối tượng có ba biến trạng thái: loading, error, và data. Chúng tôi hủy cấu trúc các biến này và sử dụng chúng để hiển thị có điều kiện thông báo tải, thông báo lỗi hoặc dữ liệu đã tìm nạp.

Nếu loadinglà true, chúng tôi hiển thị một thông báo tải đơn giản. Nếu errorlà sự thật, chúng tôi sẽ hiển thị thông báo lỗi với văn bản thông báo lỗi. Nếu datađúng như vậy, chúng tôi sẽ hiển thị dữ liệu đã tìm nạp dưới dạng danh sách không có thứ tự.

Phần kết luận

Trong bài viết này, chúng ta đã khám phá cách triển khai useFetchhook trong React với hỗ trợ bộ nhớ đệm bằng Axios. Móc tùy chỉnh này cho phép bạn tìm nạp dữ liệu từ API và xử lý trạng thái tải, lỗi và dữ liệu theo cách mô-đun và có thể tái sử dụng. Chúng tôi cũng đã chỉ ra cách sử dụng useFetchhook trong một thành phần để tìm nạp dữ liệu và hiển thị dữ liệu đó theo điều kiện dựa trên trạng thái tải và trạng thái lỗi.

Với useFetchhook này, bạn có thể dễ dàng tìm nạp dữ liệu từ API trong các dự án React của mình trong khi vẫn giữ cho mã của bạn được sắp xếp hợp lý và dễ bảo trì.