Nov 21, 2020

4 min read

React UI Mechanics

React Redux ile Rest API Çağırımı Nasıl Yapılır ?

Not: React UI Mekanikleri ile ilgili tüm yazı serisine bu linkten erişebilirsiniz.

Bir önceki yazımızda React Virtual DOM birbirinden uzak bileşenleri birbirleri ile haberleştirmiştik. Bu sefer bileşenlerimiz Sunucu yani uzak bir kaynaktan veri okuması yaparak bunu ekranda nasıl gösterebileceğimizi anlatalım.

Senaryo

Ekrana 2 tane bileşen ekleyeceğiz.

text input alanı.
Div alanı.

input alanından kullanıcının GitHub kullanıcı ismini alacağız diğer kısımda , GitHub API bu kişi bilgisini sorguladığımızda bu kişinin bilgilerini div içerisine görüntüleyeceğiz.

Hook ve Redux geliştiriminde önemli katkısı olan Dan Abramov GitHub bilgilerini aşağıdaki API çağırarak elde edebilirsiniz. API çağrımında REST’dan bahsetmiştim

https://api.github.com/users/gaearon

Özetle

Bu input içerisinde hangi GitHub kullanıcının ismini yazarsanız. Onun ile ilgili bilgi diğer bileşenin içerisinde görüntülenecek.

Redux Geliştirelim

Daha önceden anlattığım Flux Mimari Örüntüsü yazısında

Reducer Sync İşlemler için Güvenilir Peki Async İşlemler için Güvenilir Mi ?

sorusunuz sordum ve bunun cevabını verdikten sonra bu işlemler için redux-thunk ve redux-saga middleware kullanıldığını anlatmıştım. Burada bu kütüphaneleri kullanarak geliştirme yapacağımız için oluşturacağımız projede aşağıdaki paketleri yapımıza ekliyoruz.

yarn add redux-thunk
yarn add redux-promise-middleware//Fetch kullanılabilir..
yarn add axios

Mevcut Projemize Eklentiler Yapıyoruz.

input → GitFetchView , GitFetchViewContainer: (Git Kullanıcı Adını Aldığımız kısım)
div → GitUserInfoView, GitUserInfoViewContainer : (Git Kullanıcı Bilgilerini Gösterdiğimiz Kısım)
store → GitUser ekliyoruz.

Bileşenleri (Component) Geliştirimi

GitFetchView

Bu bileşen kullanıcının girdiği input alıp, kullanıcı Fetch düğmesine bastığında bu bilgiyi props üzerinden çağırmaktan sorumlu.

GitUserInfoView

Bu bileşen kendisine verilen props üzerinden GitUser verisini ekrana basmaktan sorumlu.

Not: Görüleceği gibi 2 bileşen çok iyi soyutlanmış durumda sadece UI bileşen ekranda göstermekten ve bu bileşenlerde olan etkileşimleri ilgili yerlere iletmekten sorumlular. İlgili yerde props gelen delegation kısımları. Bunlar ne tarafından implement edildikleri bilinmiyor.

(Container) Bileşenlerin Geliştirimi

Container Pure bileşenleri Wrap edip onların isteklerini Redux Dispatcher ve Store üzerinden karşılarlar. Aşağıdaki örnekte

GitFetchViewContainer: Dispatcher üzerinden GitAPI çağrımı yapılarak verinin çekilmesini sağlıyor.
GitUserInfoViewContainer: Redux üzerinden sistemde tutulan GitUser bilgisini sağlıyor.

*GitFetchViewContainer,* GitUserInfoViewContainer

Store Geliştirimi

GitUser Store geliştirimi Action payload çağrılacak REST API ve gitName parametre olarak sağlanır. Bu sayede GitUser Reducer ilgili güncelleme geldiğinde kendi state güncellemiş olur.

Burada Store middleware eklemek için Redux kütüphanesinin sağlamış olduğu applyMiddleware fonksiyonunu kullanıyoruz.

Akışı Özetlersek

GitFetchView içerisinde Git kullanıcı ismi yazılır ve Fetch Düğmesine basılır.
GitFetchViewContainer Redux Dispatcher ile getGitUser action tetikler.
getGitUser axios XHTTPRequest çağrımı yapacak ama bu aşamada Redux-Thunk ve Redux-Promise-Middleware üzerinden bu işlemler yapılır.
3 aşamadaki işlemin başarılı/başarısız olması durumuna göre gitUser Reducer çağrılır.
Reducer kendi state günceller ve Store tetikler.
Store kendisine bağlı olan observable props sahip Container tetikler. Bizim örneğinizde GitUserInfoViewContainer üzerinden GitUserInfoView bileleni tetiklenir ve güncellenen GitUser bilgisini ekranda gösterir.

Not : Konuyu ve akışı daha iyi anlamak için Tarayıcının Developer Tool ve Source kısmından akışı adım adım debug etmenizi öneririm. Bu sayede konuyu daha iyi anlayabilirsiniz.