Bu makale, React Hooks ve Redux-Saga kullanarak asenkron veri getirme işlemlerini ele alıyor React Hooks, fonksiyonel bileşenlerde state yönetimi için kullanılan bir API'dir ve component'ler içerisindeki state yönetimini kolaylaştırır Redux-Saga ise, Redux ile asenkron işlemleri kontrol etmek için kullanılan bir middleware'dir Generator fonksiyonları ve Effectler gibi kavramlar kullanarak, Redux-Saga asenkron işlemleri daha okunaklı hale getirir Makalede, Redux-Saga'nın temel kavramlarına da değiniliyor Generator fonksiyonları, fonksiyon işlemlerinin belirli bir yerde durmasına izin verirken, Effectler, Redux-Saga tarafından sağlanan asenkron işlemleri kontrol etmek için kullanılan fonksiyonlardır Asenkron işlemleri yönetmek ve verileri doğru şekilde kullanmak için React Hooks ve Redux-Saga kullanmak oldukça önemlidir
Bu makale, React Hooks ve Redux-Saga kullanarak nasıl asenkron veri getirme işlemleri yapabileceğinizi anlatmaktadır. Asenkron veri getirme işlemleri, modern web uygulamaları geliştirirken sık karşılaşılan bir durumdur ve bu işlemler farklı zorluklar ortaya çıkarabilir. React Hooks ve Redux-Saga ile birlikte, asenkron işlemleri yönetmek ve verileri doğru bir şekilde kullanmak oldukça kolaylaşır.
React Hooks Nedir?
React Hooks, React ile gelen ve fonksiyonel bileşenlerde state yönetimi için kullanılan API'dir. Class component'lerinde state yönetimi için kullanılan setState fonksiyonunun yerine kullanılır. Hooks, functional component'ler ile class component'ler arasındaki farkı yok etmektedir. Bir functional component içerisinde önceki durumlardan bağımsız olarak state korunabilir.
Hooks sayesinde component'ler içerisindeki state yönetimi daha kolay hale gelir. useState gibi birkaç farklı Hook ile state yönetimi yapmak mümkündür. useEffect Hook'u ile component'in yaşam döngüsü takip edilerek state değişikliklerine bağlı olarak ilgili işlemler yapılabilir. Bu sayede component'ler daha az kod içerisinde daha fazla işlem yapabilir.
Redux-Saga Nedir?
Redux-Saga, Redux middleware kullanarak asenkron işlemlerin yönetimini kolaylaştıran bir kütüphanedir. Redux-Saga, Redux mantığını kullanır ve Redux-Thunk gibi diğer kütüphanelerden farklı olarak, kodun okunabilirliğini ve yeniden kullanılabilirliğini artırır.
Redux-Saga, Redux ile state yönetimi yapılırken, asenkron işlemler için kullanılabilen bir ara yazılımdır. Özellikle, API istekleri, veritabanı çağrıları gibi asenkron işlemler için kullanılabilir. Generator fonksiyonları ve Effectler gibi kavramlar kullanarak, Redux-Saga asenkron işlemlerin daha okunaklı ve yönetilebilir bir şekilde yazılmasını sağlar.
Generator fonksiyonları, Redux-Saga'nın temel kavramlarından biridir. Generator fonksiyonları, JavaScript'in özel bir türüdür ve asenkron işlemleri kontrol etmek için kullanılabilir. Generator fonksiyonları, yield ifadesi ile belirli bir yere kadar fonksiyonu durdurur ve sonra devam ettirmek için bir nesneye ihtiyaç duyar.
Effectler, Redux-Saga tarafından sağlanan asenkron işlemleri kontrol etmek için kullanılan fonksiyonlardır. Effectler, bir API isteği göndermek, bir veritabanı işlemi yapmak, bir event dinlemek gibi işlemleri gerçekleştirebilir. Effectler, Redux-Saga tarafından sağlanan görev atamaları ile kullanılır ve yine yield ifadesi ile durdurma ve devam ettirme işlemleri gerçekleştirilebilir.
Redux-Saga Temel Kavramları
Redux-Saga, Redux middleware ile asenkron işlemleri yönetmek için kullanılan güçlü bir kütüphanedir. Redux-Saga'nın temel kavramlarını anlamak, kütüphaneyi daha iyi kullanmanızı sağlar.
Generator Fonksiyonları: Redux-Saga, generator fonksiyonlarını kullanarak asenkron işlemleri yönetir. Generator fonksiyonları, fonksiyon işlemlerinin belirli bir yerde durmasına izin verirler. Generator fonksiyonlarının başlatılması için bir iterable nesne oluşturulmalıdır.
Effectler: Asenkron işlemleri kontrol etmek için kullanılan fonksiyonlara Effectler denir. Çağırdığınız tüm Effectler, işlem işlendiğinde bir nesne döndürür. Bu nesneler, Redux-Saga tarafından daha sonra kullanılır.
Saga'ların İşleyişi: Generator fonksiyonları ve Effectler, Saga'ların temel yapı taşlarıdır. Bu iki öğe, asenkron işlemleri yönetmek için Saga'ların işleyişinde kullanılır. Saga'lar, bir veya daha fazla Effect'le tetiklenirler ve sonrasında Redux store'unda state güncellemeleri gerçekleştirirler.
Generator Fonksiyonları
Generator Fonksiyonları
Javascript'teki fonksiyonlar genel olarak bir girdi alır ve döndürürler. Ancak, generator fonksiyonları bu genel kuraldan biraz farklıdır. Bu fonksiyonlar özel bir türdür ve fonksiyon işlemlerinin belirli bir yerde durmasına izin verirler. Bu sayede kodun okunabilirliği artar ve karmaşık fonksiyon işlemleri kolaylıkla yönetilebilir hale gelir.
Generator fonksiyonları, normal fonksiyonlardan farklı olarak, çalıştırıldıklarında bir iteratör döndürürler. Bu iteratör, fonksiyonun işlem adımlarını takip ederek istenilen sonuca ulaştırır. Bu sayede kodun bellek yönetimi ve performansı konusunda da faydası görülebilir.
Generator fonksiyonlarını kullanarak, özellikle Redux-Saga gibi asenkron işlemlerin yapıldığı projelerde, kod düzeni ve işleyişi daha düzgün şekilde yönetebiliriz. Ayrıca, sürekli olarak tekrar eden işlemlerde de generator fonksiyonları kullanarak, kod tekrarını minimize edebiliriz.
Effectler
Effectler, Redux-Saga'nın en önemli kavramlarından biridir. Asenkron işlemleri kontrol etmek için kullanılan bu fonksiyonlar sayesinde uygulamanızın akışını belli bir düzene sokabilirsiniz. Effectler, öncesinde belirtilen bir eylemin sonucunda gerçekleşen işlemlerdir ve genellikle sağ tarafta yer alan bir işlemi başlatmak için kullanılırlar.
Birçok farklı effect bulunsa da, popüler kullanılanlar arasında call, put, ve take yer alır.
- Call: Fonksiyon çağrısı yapmak için kullanılır. Örneğin, API istekleri göndermek için kullanılan Axios gibi bir fonksiyonun çağrısını yapabilirsiniz.
- Put: Redux store'daki state'i değiştirmek için kullanılır. Örneğin, bir API isteği sonucunda başarılı olduğunu belirten bir eylem tetiklenebilir.
- Take: Belirtilen bir eylemin tetiklenmesini bekler ve o eylem gerçekleştiği anda çalışır. Örneğin, kullanıcının "submit" butonuna tıklamasını bekleyen bir take eylemi oluşturulabilir.
Effectlerin kullanımı ve işleyişi sadece Redux-Saga için değil, asenkron işlemlerin genel mantığı için de oldukça önemlidir. Bu yüzden, effectlerin detaylı bir şekilde öğrenilmesi uygulamanızın performansını artıracaktır.
React Hooks ile State Yönetimi
React Hooks, React'ta fonksiyonel bileşenlerde state yönetimi yapmanızı sağlayan bir API'dir. Bu sayede, Class Component'lerinde kullanılan state yönetimi işlemlerini fonksiyonel bileşenlerde de gerçekleştirebilirsiniz.
useState, fonksiyonel bileşenlerde state yönetimi için kullanılan en temel React Hook'udur. Bu Hook sayesinde, bileşen içerisinde state tutabilir ve değiştirebilirsiniz. Örneğin, bir butona tıklama durumunu takip etmek istediğinizde, aşağıdaki gibi bir state initalize edebilirsiniz:
| Kod | Açıklama |
|---|---|
| const [count, setCount] = useState(0); | Bir count state'i oluşturur ve başlangıç değeri 0'dır. setCount fonksiyonu, count state'ini günceller. |
useEffect Hook'u ise, fonksiyonel bileşenlerde side effect adı verilen işlemleri gerçekleştirmenizi sağlar. Örneğin, API istekleri veya veritabanı işlemleri, side effect örnekleridir. useEffect Hook'u sayesinde, bu işlemleri bileşenin componentDidMount() veya componentDidUpdate() fonksiyonları gibi özel bir yaşam döngüsü fonksiyonu olmadan gerçekleştirebilirsiniz.
| Kod | Açıklama |
|---|---|
| useEffect(() => { | Bileşen yüklendiğinde yürütülecek işlemleri gerçekleştirir. |
| // API istekleri, veritabanı işlemleri vb. | |
| return () => { | Bileşen kaldırıldığında yürütülecek işlemleri gerçekleştirir. |
| // Temizleme işlemleri vb. | |
| }, [dependent]); | dependent: useEffect'in yalnızca belirli bir durum değiştiğinde çağrılmasını sağlar. |
React Hooks, state yönetimi işlemlerini React'ta daha kolay ve anlaşılır hale getirirken, useEffect Hook'u da side effect işlemlerini daha verimli hale getirir. Bu sayede, React projelerinizde daha etkili ve performanslı olabilirsiniz.
Redux-Saga kullanarak Veri Getirme İşlemleri
Redux-Saga, Redux middleware ile asenkron işlemlerin yönetimini kolaylaştırmak için kullanılan bir kütüphane. Bu kütüphane kullanılarak API istekleri yönetilebilir. Yapılan her API isteği bir "saga" olarak adlandırılır ve bu sagalar generator fonksiyonu kullanılarak oluşturulur. Sagalar, Redux-Saga tarafından sağlanan bazı özel fonksiyonlar ile yönlendirilir ve bu fonksiyonlar, sagaların yürütülmesi sırasında belirli adımların gerçekleştirilmesini sağlar.
Redux-Saga sayesinde yapılan bir API isteği sonucunda elde edilen veri, store'daki state ile senkronize edilir. Bu sayede elde edilen veriler, React bileşenlerinde kullanılabilir hale getirilir. API istekleri sırasında hata oluşması durumunda da bu durum Redux-Saga kullanarak yönetilebilir ve gerekli işlemler gerçekleştirilir.
Redux-Saga ile API istekleri yönetmenin en büyük avantajlarından biri de işlemlerin paralel olarak yapılabilmesidir. Redux-Saga ile aynı zamanda birden fazla API isteği de yönetilebilir. İstekler arasında bir öncelik sırası belirtilirse, Redux-Saga bu sıraya göre istekleri yürütür ve her bir isteğin durumunu ayrı ayrı takip eder.
Redux-Saga kütüphanesi, Async/Await veya Promise'lerle de asenkron işlemleri yönetmek mümkün olsa da, Redux-Saga'nın sağladığı avantajlar göz önünde bulundurulduğunda, özellikle büyük ve karmaşık uygulamalar için tercih edilmesi daha uygundur.
Proje Örneği
Bu makalede, React Hooks ve Redux-Saga kullanarak asenkron veri getirme işlemlerinin nasıl gerçekleştirileceğinden bahsedildi. Şimdi örnek bir proje üzerinde, adım adım nasıl yapacağımızı inceleyelim.
Öncelikle, ilgili paketleri yüklemek için bir npm projesi oluşturup, gerekli kurulumları gerçekleştirmemiz gerekiyor. Bu adımı gerçekleştirmek için aşağıdaki komutları kullanabiliriz:
npx create-react-app my-project cd my-project npm install redux react-redux redux-saga Proje hazır olduğunda, yaratılan dosya yapısı içerisinde src klasöründe yeni bir klasör açalım ve adına api diyelim. Bu klosörde config.js isimli bir dosya açıp içerisine API endpoint'imizi ekleyelim:
const API_BASE_URL = 'http://localhost:8000/api'; export default { API_BASE_URL } Ardından, Redux bağlantılarımızı oluşturmak üzere bir klasör açalım. Bu klasör içerisinde reducers.js ve actions.js dosyalarımızı oluşturalım. Daha sonra, sagas.js isimli bir dosya oluşturalım. Bu dosya içerisinde Redux-Saga işlemlerimizi yapacağız.
API isteğini gerçekleştirmek üzere, ayrı bir klasör daha oluşturup içerisine api.js isimli dosyamızı ekleyelim. Bu dosyada, belirlenen endpoint'e GET isteği göndererek verilerimizi getireceğiz.
Son olarak, component dosyalarımızı oluşturup içerisinde asenkron işlemlerimizi gerçekleştirebiliriz. Bu sayede, Redux-Saga kullanarak veri getirme işlemlerimizi yönetebilir ve state yönetim işlemlerimizi rahatlıkla yapabiliriz.
Projenin Kurulumu ve Ayarları
Bu makalede React Hooks ve Redux-Saga kullanarak asenkron veri getirme işlemleri anlatılmaktadır. Bu işlemleri uygulamak için örnek bir proje kurmanız gerekmektedir. Bu nedenle, bu bölümde geliştirme ortamının hazırlanması ve örnek projenin kurulumu hakkında bilgiler verilecektir.
Öncelikle, proje için bir klasör oluşturmanız gerekir. Bu klasör içinde, terminalden npm init komutunu çalıştırarak package.json dosyasını oluşturun. Daha sonra, gerekli paketleri yüklemek için aşağıdaki komutları sırayla kullanın:
- npm install --save react react-dom
- npm install --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin <
- npm install --save redux react-redux redux-saga axios
Paketlerin yüklenmesi bittikten sonra, webpack.config.js dosyasını oluşturun. Bu dosyada, projenin ayarlarını yapmanız gerekmektedir. Ayarlar bittikten sonra, src klasörü içinde index.js ve App.js dosyalarını oluşturun.
Index.js dosyasında, App bileşenini render edin ve Provider bileşenini kullanarak store'u bağlayın. App.js dosyasında, gerekli React Hook'ları kullanarak state yönetimini sağlayın ve componentlerinizi oluşturun. Ayrıca, Redux-Saga'yı kullanarak API isteklerinizi ve store'daki state değişikliklerini yönetin.
Projenin kurulumu ve ayarları bittikten sonra, projeyi çalıştırmak için terminalden 'npm start' komutunu kullanın. Böylece, webpack-dev-server çalışacaktır ve projenizi localhost:3000 üzerinden görebileceksiniz.
React Bileşenlerinin Oluşturulması ve Redux-Saga Entegrasyonu
React bileşenlerinin oluşturulması ve Redux-Saga entegrasyonu, projedeki en önemli adımdır. Bu adımda öncelikle React Hook’ları kullanarak state yönetiminin nasıl sağlanacağı belirlenir. Gerekli state’ler oluşturulur ve React bileşenleri design edilir. Bu aşamada UI farklılıklarının da belirlenmesi gereklidir.
Redux-Saga entegrasyonu içinse öncelikle installing işlemleri gerçekleştirilir. Package.json dosyası güncellenir, sagas klasörü oluşturulur ve gerekli middleware’ler eklenir. Daha sonra sagas.js dosyası oluşturulur ve asenkron fonksiyon çağırımları yapılır.
En son olarak async ve await kullanarak API istekleri gerçekleştirilir. Response değerlerinin alınabilmesi için state yönetimi ile Redux-Saga bir arada kullanılır. Bu sayede veriler ana component’e aktarılır ve view’da değişiklikler yapılarak son kullanıcıya sunulur.
Bu adımda dikkat edilmesi gereken en önemli nokta, React bileşenleri ve Redux-Saga’ların birbiriyle senkronize bir şekilde çalışabilmesidir. Ayrıca olası hataları engellemek için her adımda testler de gerçekleştirilmelidir.
Sonuç olarak, React Hook’ları ve Redux-Saga kullanarak asenkron veri getirme işlemleri oldukça kolay ve verimli bir şekilde yapılabilmektedir. Bu adımların doğru bir şekilde uygulanması, projenin başarısı için oldukça önemlidir.