Photo by David Clode on Unsplash

React UI Mechanics

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

Senaryo

Ekrana 2 tane bileşen ekleyeceğiz.

  • text input alanı.
  • Div alanı.
https://api.github.com/users/gaearon

Redux Geliştirelim

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

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.
Proje Yapımızı Geliştiriyoruz

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.

GitFetchView Bileşeni

GitUserInfoView

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

GitUserInfoView Bileşeni

(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.

GitUser Store Geliştirimi
store.js

Akışı Özetlersek

Örneğimizdeki Akış
  1. GitFetchView içerisinde Git kullanıcı ismi yazılır ve Fetch Düğmesine basılır.
  2. GitFetchViewContainer Redux Dispatcher ile getGitUser action tetikler.
  3. getGitUser axios XHTTPRequest çağrımı yapacak ama bu aşamada Redux-Thunk ve Redux-Promise-Middleware üzerinden bu işlemler yapılır.
  4. 3 aşamadaki işlemin başarılı/başarısız olması durumuna göre gitUser Reducer çağrılır.
  5. Reducer kendi state günceller ve Store tetikler.
  6. 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.
Network Tabından Giden/Gelen Veri

GitHub Kaynak Kod

Referanslar

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store