Bugün oluşturduğumuz uygulamaların çoğu, API’ler aracılığıyla dış kaynaklardan veri tüketiyor. Bir sunucudan veri alırlar ve kullanıcı arayüzlerinde görüntülerler.
React’i kullanarak, bir API’den veri almak için özel bir kanca oluşturabilirsiniz. Bir URL verildiğinde, bu kanca, verileri ve isteğe bağlı bir hata mesajını içeren bir nesne döndürür. Daha sonra bu kancayı bir bileşende kullanabilirsiniz.
Özel Tepki Kancası Oluşturma
useFetch.js adlı yeni bir dosya oluşturarak başlayın. Bu dosyada, bir URL dizesini parametre olarak kabul eden useFetch() adlı bir işlev oluşturun.
const useFetch = (url) => {
}
Kanca, çağrıldıktan hemen sonra API çağrısını yapmalıdır. Bunun için useEffect() kancasını kullanabilirsiniz .
Gerçek API çağrıları için getirme API’sini kullanın. Bu API, zaman uyumsuz olarak HTTP üzerinden istekte bulunmanıza ve yanıt almanıza olanak tanıyan söz tabanlı bir arabirimdir.
useFetch() özel kancasına aşağıdakini ekleyin.
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 };
};
export default useFetch;
Bu kancada, önce üç değerin durumunu başlatıyorsunuz:
data: API yanıtını tutar.
error: Bir hata oluştuğunda bir hata mesajı tutar.
yükleme: API verilerini getirip getirmediğini gösteren bir boolean değeri tutar. Yükleme durumunu true olarak başlatın. API verileri döndürdüğünde, bunu false olarak ayarlayın.
useEffect() kancası, URL dizesini bağımsız değişken olarak alır. Bu, URL her değiştiğinde çalışmasını sağlamak içindir.
useFetch() işlevi, verileri, yüklemeyi ve hata değerlerini içeren bir nesne döndürür.
React Özel Kanca Kullanma
Az önce oluşturduğunuz useFetch() özel kancasını kullanmak için onu içe aktararak başlayın:
const useFetch = require(“./useFetch”)
Ardından aşağıdaki gibi kullanın:
const {data, loading, error} = useFetch(url)
Göstermek için aşağıdaki Şakalar bileşenini göz önünde bulundurun:
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>
);
};
export default Jokes;
Şakalar API’sinin URL’siyle birlikte useFetch() kancasını çağırır ve verileri, yükleme ve hata değerlerini alır.
Şakalar bileşenini işlemek için önce Yüklemenin doğru olup olmadığını kontrol edin. Öyleyse, bir “Yükleniyor…” ifadesi görüntüleyin, aksi takdirde verileri ve varsa hata mesajını işleyin.
Neden Özel Tepki Kancaları Kullanmalı?
Bu bileşende useFetch() özel kancasını kullandığınız gibi, diğer bileşenlerde tekrar kullanabilirsiniz. Mantığı her bileşene yazmak yerine kancalarla dışsallaştırmanın güzelliği budur.
Kancalar, kodunuzun modülerliğini geliştirmek için kullanabileceğiniz güçlü bir React özelliğidir.