چگونه یک React Hook سفارشی برای تماس های API بسازیم

قلاب‌های سفارشی به شما امکان می‌دهند عملکردی قابل استفاده مجدد ایجاد کنید که می‌توانید با هر مؤلفه React به اشتراک بگذارید.

اکثر برنامه‌هایی که امروزه ایجاد می‌کنیم، داده‌ها را از منابع خارجی از طریق APIها مصرف می‌کنند. آنها داده ها را از یک سرور واکشی می کنند و در UI خود نمایش می دهند.

با استفاده از React، می‌توانید یک هوک سفارشی برای واکشی داده‌ها از یک API ایجاد کنید. با توجه به URL، این قلاب یک شی حاوی داده ها و یک پیام خطای اختیاری را برمی گرداند. سپس می توانید از این قلاب در یک جزء استفاده کنید.

ایجاد یک React Hook سفارشی

با ایجاد یک فایل جدید به نام useFetch.js شروع کنید. در این فایل تابعی به نام useFetch() ایجاد کنید که یک رشته URL را به عنوان پارامتر می پذیرد.

const useFetch = (url) => {
}

هوک باید بلافاصله پس از فراخوانی تماس API را انجام دهد. برای این کار می توانید از قلاب useEffect() استفاده کنید.

برای تماس‌های API واقعی، از fetch API استفاده کنید. این API یک رابط مبتنی بر وعده است که به شما امکان می دهد درخواست ها و دریافت پاسخ ها را از طریق HTTP به صورت ناهمزمان دریافت کنید.

در قلاب سفارشی useFetch() موارد زیر را اضافه کنید.

import { useEffect, useState } from"react";
 
const useFetch = (url) => {
  const [data, setdata] = useState(null);
  const [loading, setloading] = useState(true);
  const [error, seterror] = useState("");
 
  useEffect(() => {
    fetch(url)
    .then((res) => res.json())
    .then((data) => {
        seterror(data.error)
        setdata(data.joke)
        setloading(false)
    })
  }, [url]);
 
  return { data, loading, error };
};
 
exportdefault useFetch;

در این هوک، ابتدا حالت سه مقدار را مقداردهی اولیه می کنید:

• داده: پاسخ API را نگه می دارد.
• error: در صورت بروز خطا پیغام خطا را نگه می دارد.
• loading: مقدار بولی را نگه می دارد که نشان می دهد آیا داده های API را واکشی کرده است یا خیر. حالت بارگذاری را به true مقداردهی کنید. هنگامی که API داده ها را برمی گرداند، آن را روی false تنظیم کنید.

قلاب useEffect() رشته URL را به عنوان آرگومان می گیرد. این برای اطمینان از اجرای آن در هر بار تغییر URL است.

تابع useFetch() یک شی حاوی داده ها، بارگذاری و مقادیر خطا را برمی گرداند.

استفاده از React Custom Hook

برای استفاده از قلاب سفارشی useFetch() که ایجاد کردید، با وارد کردن آن شروع کنید:

const useFetch = require("./useFetch")

سپس به صورت زیر از آن استفاده کنید:

const {data, loading, error} = useFetch(url)

برای نشان دادن، مؤلفه جوک زیر را در نظر بگیرید:

const Jokes = () => {
    const url = "<https://sv443.net/jokeapi/v2/joke/Programming?type=single>";
    const { data, loading, error } = useFetch(url);
 
    if (loading) return (
        <div>Loading...</div>
    )
 
    return (
      <div>
        {error && <div>{error}</div>}
        {data && <div>{<div>{data}</div>}</div>}
      </div>
    );
};
 
exportdefault Jokes;

قلاب useFetch() را با URL به جوک API فراخوانی می کند و داده ها، بارگذاری و مقادیر خطا را دریافت می کند.

برای ارائه مولفه Jokes، ابتدا بررسی کنید که آیا بارگیری درست است یا خیر. اگر چنین است، عبارت Loading… را نمایش دهید، در غیر این صورت داده ها و پیام خطا را در صورت وجود نمایش دهید.

چرا از قلاب های سفارشی واکنش استفاده کنیم؟

همانطور که از قلاب سفارشی useFetch() در این کامپوننت استفاده کردید، می توانید دوباره از آن در سایر کامپوننت ها استفاده کنید. این زیبایی بیرونی کردن منطق در قلاب ها به جای نوشتن آن در هر جزء است.

هوک ها یکی از ویژگی های قدرتمند React هستند که می توانید از آن برای بهبود ماژولار بودن کد خود استفاده کنید.

منبع مقاله