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.
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.
GitHub Kaynak Kod
Referanslar
- https://tr.reactjs.org/
- https://redux.js.org/
- https://github.com/axios/axios
- https://github.com/reduxjs/redux-thunk
- https://github.com/pburtchaell/redux-promise-middleware
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek (React Redux) için bu linke tıklayabilirsiniz.
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek (React Arayüz Mekanikleri) için bu linke tıklayabilirsiniz.