React UI Mechanics
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.
İş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ı)
1. NooView onun içerisinede SooView Bileşenini Oluşturalım
- 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.
- 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.
2. Redux Yöntemini Kullanalım.
- 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ı
3. Redux Yöntemini Kullanalım.
- 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.
4. Store Objeleri
- 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.
- Bu örnekte VisibilityMode değeri içerisinde boolean bir değer tutulurken HIDE/SHOW komutları bu state değiştiren Action Type..
4. Containers Objeleri
- 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.
5. Components Objeleri
- SooView Bileşeni içerisinde this.props.hide ve this.props.show ile global store Container üzerinden bağlantı kurmuş olduk
- 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.
- Özetle Global Store biri action tetikleyen diğerleride dinleyen bileşenler geliştirmiş olduk.
6. Altyapının Hazırlanması
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
7. Özet Olarak Çalışma Mekanizması
- 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.
