🚀 Üretim Hazır TypeScript ile React Veri Getirme Kancası Oluşturma

🚀 Üretim Hazır TypeScript ile React Veri Getirme Kancası Oluşturma

React uygulamalarında veri getirme, uygulamanın temel bir parçasıdır. Verileri API’lerden, yerel depolama alanlarından veya diğer kaynaklardan alabilir ve bunları kullanıcı arayüzünde görüntülemek için kullanabiliriz. Bu işlemi basitleştirmek için, React’in güçlü özelliklerinden biri olan **kancalar** kullanabiliriz. Bu makalede, TypeScript kullanarak üretim hazır bir React veri getirme kancası nasıl oluşturulacağını adım adım göstereceğim.

Temel Kanca Yapısı

İlk adım, veri getirme işlemlerini ele alacak temel bir kanca yapısı oluşturmaktır. Bu kanca, verileri getirebilecek, hata durumlarını ele alabilecek ve yükleme durumunu yönetebilecek bir fonksiyon içerecektir. İşte basit bir örnek:

“`typescript
import { useState, useEffect } from ‘react’;

interface UseFetchProps {
url: string;
}

const useFetch = (props: UseFetchProps): {
data: T | null;
isLoading: boolean;
error: Error | null;
} => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try {
const response = await fetch(props.url);
const json = await response.json();
setData(json);
} catch (error) {
setError(error as Error);
} finally {
setIsLoading(false);
}
};

fetchData();
}, [props.url]);

return { data, isLoading, error };
};

export default useFetch;
“`

Bu kod parçasında, `useFetch` adında bir kanca oluşturduk. Bu kanca, `url` parametresini alır ve bu URL’den veri getirmek için kullanılır. Kanca içinde, `data`, `isLoading` ve `error` durumunu yöneten üç durum değişkeni bulunmaktadır. `useEffect` kancası, `url` değişirse veriyi yeniden getirmek için kullanılmaktadır.

Hata İşleme

Üretim hazır bir kanca, hata durumlarını düzgün bir şekilde ele almalıdır. Bu örnekte, `try…catch` bloğu kullanarak olası hataları yakaladık ve `error` durum değişkenine atadık. Bu, kullanıcılara hata mesajları görüntülemek veya hata durumlarını günlük kaydı için kullanmak için bir mekanizma sağlar.

Yükleme Durumu

Veri getirme işlemi sırasında kullanıcılara bir yükleme göstergesi sunmak, kullanıcı deneyimini iyileştirmek için önemlidir. `isLoading` durum değişkenini kullanarak, veri getirilirken bir yükleme göstergesi göstermek veya içeriği gizlemek için koşullu olarak render edebiliriz.

Bağımlılıklar

`useEffect` kancasının ikinci parametresi, bağımlılıklar listesidir. Bu liste, kancanın yeniden yürütülmesi gereken değişkenleri tanımlar. Bu örnekte, `url` değişkenini bağımlılık olarak ekledik, böylece `url` değiştiğinde veri yeniden getirilir.

TypeScript ile Tip Güvenliği

TypeScript’i kullanmak, veri getirme kancasına tip güvenliği sağlayarak hata ayıklamayı ve kod sürdürülebilirliğini iyileştirir. `T` tipi parametresi, veri türünü belirlemek için kullanılır ve `useFetch` kancası, beklenen veri türüne uygun değerler döndürür.

Kullanım Örneği

İşte `useFetch` kancasını nasıl kullanabileceğinize dair bir örnek:

“`typescript
import React from ‘react’;
import useFetch from ‘./useFetch’;

const MyComponent = () => {
const { data, isLoading, error } = useFetch({ url: ‘https://api.example.com/data’ });

if (isLoading) {
return

;
}

if (error) {
return

;
}

return (

);
};

export default MyComponent;
“`

Sonuç

Bu makalede, TypeScript ile üretim hazır bir React veri getirme kancası oluşturma adımlarını inceledik. Bu kanca, veri getirmeyi, hata durumlarını ele almayı, yükleme durumunu yönetmeyi ve tip güvenliğini sağlamayı kolaylaştırır. Veri getirme işlemleriyle uğraşırken bu kanca, kodunuzu daha temiz, daha güvenilir ve daha sürdürülebilir hale getirmenize yardımcı olur.

Bu makalede ele alınan konular hakkında daha fazla bilgi edinmek için şu kaynaklara göz atabilirsiniz:

• React Hooks Referansı – useEffect
• TypeScript Resmi Web Sitesi
• Fatih Soysal Blogu

#Etiketler

#React #TypeScript #Kancalar #VeriGetirme #Hataİşleme #YüklemeDurumu #ÜretimHazır #KodÖrneği