Photo by David Clode on Unsplash

React Sanal DOM Ağacında, Uzak Bileşenleri Redux üzerinden Nasıl Konuştururuz ?

React mekanik örneklerini anlatmayı düşündüğüm bu yazı serisinde amacım CSS ve Görselliğe takılmadan UI Mekaniği ile ilgili örnekler geliştirmek. Konunun üçüncü dersi birden fazla UI bileşeni ekranın farklı yerlerinde birbirlerine state ve bir takım komutlarını nasıl iletebilir ? Bunun için Redux kullanarak bu sorunu çözmeye çalışacağız.

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

Önceden geliştirdiğimiz ekranlar içerisinde FOO(FooView) ve DOO(DooView) vardı. Bu 2 bileşeni bir önceki yazımızda iletişim kurmasını sağlamıştık. Bunu yaparken Lifting State Up (State yukarı taşıma) yöntemini kullanmıştık. Bu sefer işler biraz daha zor. NooView içerisinde SooView bileşeni olsun bu bileşen içerisinde Show/Hide düğmeleri Foo ve Doo gizleyip/göstersin.

Burada bu işlemin zor olması, artık iç içe bileşenlerde state ve props delegation yukarılara taşımanın zorluğu.

Senaryo

İşte tam da bu noktada yardımımıza Redux koşuyor. Redux Flux Mimarisinin bir gerçekleştirimi olduğunu ve bu yapının nasıl çalıştığını anlatmıştım (Flux Mimarisi Detaylı Anlatımı)

Flux Mimarisi
  • NooView içerisinde 2 düğme olacak şekilde SooView oluşturuyoruz. Bu aşamda düğmelerin herhangi bir işlevi yok sadece ekranda gösteriliyor.
NooView ve SooView
  • SooView nasıl düğmesine basılınca ilgili State bilgisini Diğer View Hide/Show için Geçirecek ? Her Türlü State Lift Up Yapmak Mantıklımı ? Çok da mantıklı durmuyor bu durumda tüm state ve prop handling işlemleri App.js veya başka parent Node içerisine taşınarak tek bir obje içerisinde kocaman bir state ve handling mekanizmaları olacak.
  • Amacımız business(iş) mantıklarını dağıtmak. Tek bir sınıfın içerisinde toplamak değil.
  • Redux modüllerini yükleyelim sisteme
yarn add redux
yarn add react-redux
  • Şu anda yapmak istediğimiz davranışın aşağıdaki gibi olmasını istiyoruz. Hide bastığımız zaman bir şekilde Redux tutulan State değiştiren komutun verilmesi ve bu komutu dinleyen bileşenlerin buna göre kendi görselliklerini ayarlaması
  • Bu aşamada her bir bileşenimizin çevresine bir ContainerWrapper ekliyoruz.

Neden bu şekilde yaptığımızı React Örnek Proje Mimari yazımı okuyarak daha iyi anlayabilirsiniz

  • HighOrderComponent dediğimiz bu Container bizim bileşenlerimizin PureComponent kalmasını sağlayarak bileşenin Redux ile konuşma kısmını bu Container gerçekleştirecekler
  • Aşağıdaki şekilde container ve store altında ilgili dosyaları oluşturalım.
Container ve Store Klasör yapısı
  • Store objeleri sizin action, constants, reducers objelerinden oluşacak. Action aslında KomutObjesi, constants içerisinde Komutun Tipi duruyor, Reducers içerisinde Redux Dispatcher yapısına register olacak objenizi veriyorsunuz. Bu reducer ilgili komutlar Dispatcher üzerinden bu reducer ulaştırılıp burda state bir durumdan başka bir duruma geçmeleri/güncellenmeleri sağlanıyor.
Store Objleri
  • Bu örnekte VisibilityMode değeri içerisinde boolean bir değer tutulurken HIDE/SHOW komutları bu state değiştiren Action Type..
  • NooView redux ile iletişimi olmadığı için bunun için bir Container oluşturmaya gerek yok. Ama DooView,FooView,SooView için Container nesneleri oluşturuyoruz.
  • DooView ve FooView Redux props olarak visibilityMode state bir güncelleme olursa dinleyecek şekilde Container Wrap ediliyorlar
  • Burda önemli olan nokta. showViews/hideViews arayüzü üzerinden Dispatcher çağırma yeteneği sadece SooViewContainer var. Diğer tüm Container ‘lar visibilityMode değişikliğin kendilerine tetiklenmesi için mapStateToProps içerisinde AppState → kendi Props arasında bir bağlantı sağlamış durumda.
  • SooView Bileşeni içerisinde this.props.hide ve this.props.show ile global store Container üzerinden bağlantı kurmuş olduk
Soo View Bileşini
  • DooView ve FooView Bileşenleride bu Global State göre visilibity ayarlamaları gerekiyor. Bunun için this.props.visilibityMode global Store Container üzerinden yine bağlantı kurmuş olduk.
DooView bileşeni (FooView benzer)
  • Özetle Global Store biri action tetikleyen diğerleride dinleyen bileşenler geliştirmiş olduk.

Burada bizim oluşturacağımız reducers createStore fonksiyonuna geçirerek ve App objesinin Provider store={store} sarmalayarak. Bu Store App içerisindeki Bileşenlerde kullanılabilmesini sağlarız.

Neden bu şekilde yaptığımızı React Örnek Proje Mimari yazımı okuyarak daha iyi anlayabilirsiniz

Store Oluşturumu
  • SooView içerisindeki Hide düğmesine basıldığında → SooViewContainer içerisinden hideViews call eder.
  • SooViewContainer içerisindeki hideViews → Redux Dispatcher tetikler ama hide() action Objesi ile
  • Redux Dispatcher ise → bu hide() action Objseni → Reducers tek tek iletir ve ilgili Reducer Action aldığında kendi State Örneğin A durumundan → B durumuna geçirir. Burda VisibilityMode Reducer içerisindeki visibilityMode değeri false olarak atanır.
  • Bunu dinleyen Component ler mapStateProps bu reducer register olmuş bileşenler yeni bir state değişikliğinde props değişikliği gibi trigger olur FooView ve DooView bileşenleri görselleri gizlenir.

Kod Örnekleri

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Redux) erişmek için bu linke tıklayabilirsiniz.

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Arayüz Mekanikleri) erişmek 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