React’te Sözlerin Gücü: UI ve İş Mantığının Ayrımı
Merhaba! Ben Fatih Soysal ve bugün React uygulamalarında temiz ve sürdürülebilir kod yazmanın önemli bir yönü olan, kullanıcı arayüzü (UI) ve iş mantığının ayrımı hakkında konuşacağız. Özellikle, bu ayrımı sağlarken Promise’lerin nasıl büyük bir yardımcı olabileceğini inceleyeceğiz. Bu ayrım, kodun okunabilirliğini, test edilebilirliğini ve ölçeklenebilirliğini önemli ölçüde artırır. Öncelikle, neden bu ayrımın bu kadar önemli olduğunu anlamaya çalışalım.
UI kodunuzu iş mantığınızla karıştırmak, kodunuzun karmaşıklaşmasına ve bakımı zorlaştırmasına yol açar. Örneğin, bir API çağrısı sonucunu doğrudan UI bileşeninizde işlerseniz, hata yönetimi ve test etme karmaşıklaşır. Ancak, bu işlemleri ayrı fonksiyonlar veya servisler halinde ayırırsanız, kodunuz çok daha düzenli ve anlaşılır olur. Burada devreye Promise’ler giriyor. Promise’ler, asenkron işlemlerin sonuçlarını yönetmek için mükemmel bir araçtır. API çağrıları gibi asenkron işlemleri Promise’ler ile kapsülleyerek, UI bileşenlerinizin iş mantığından bağımsız kalmasını sağlayabilirsiniz.
Promise’ler ile Temiz Kod Yazımı
Şimdi, bir örnek üzerinden Promise’lerin nasıl kullanılacağını görelim. Diyelim ki bir kullanıcı listesi çekmek için bir API çağrısı yapıyoruz. Bu işlemi, UI bileşenimizden ayrı bir fonksiyonda gerçekleştirebiliriz:
// kullanıcıServisi.js
import axios from 'axios';
const getUsers = () => {
return axios.get('/api/users')
.then(response => response.data)
.catch(error => {
console.error("Kullanıcılar alınamadı:", error);
throw error; // Hatayı yukarıya fırlatıyoruz.
});
};
export default getUsers;
Bu fonksiyon, API çağrısını yapar ve sonucu bir Promise olarak döndürür. UI bileşenimizde ise bu Promise’i kullanarak verileri işleyebiliriz:
// KullaniciListesi.js
import React, { useState, useEffect } from 'react';
import getUsers from './kullaniciServisi';
const KullaniciListesi = () => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchUsers = async () => {
try {
const fetchedUsers = await getUsers();
setUsers(fetchedUsers);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
fetchUsers();
}, []);
if (loading) return Yükleniyor...
;
if (error) return Hata oluştu: {error.message}
;
return (
{users.map(user => (
- {user.name}
))}
);
};
export default KullaniciListesi;
Gördüğünüz gibi, UI bileşeni sadece verileri görüntüler ve hata yönetimi ile yükleme durumunu yönetir. İş mantığı ise ayrı bir fonksiyonda kapsüle edilmiştir. Bu yaklaşım, kodun okunabilirliğini ve test edilebilirliğini artırır. Ayrıca, UI bileşenini değiştirmeden iş mantığını kolayca değiştirebilirsiniz. Sonuç olarak, bu yaklaşım daha sürdürülebilir ve ölçeklenebilir uygulamalar oluşturmanıza olanak tanır.
Son olarak, benzer projeler için kendi web sitemi‘ni ziyaret edebilirsiniz. Ayrıca, konu hakkında daha fazla bilgi edinmek için bu makaleye göz atabilirsiniz.
#Etiketler: React, Promise, UI, İş Mantığı, Ayrım, Temiz Kod, Ölçeklenebilirlik, JavaScript, Fatih Soysal, Asenkron İşlemler, API Çağrıları, Hata Yönetimi