Redux Nedir? Neden İhtiyac Duyarız?

Redux, bir javascript kutuphanesidir. Redux, React ’ın olmazsa olmazı veya bir parcası değildir. Dan Abramov tarafından geliştirilmiş bir kutuphanedir. Asıl gorev tanımı ise, Javascript uygulamalarında state bileşenini yonetmeyi sağlayan javascript kutuphanesidir.


Redux ile React ’ın birlikte anılmasının sebebi, birlikte populer olmaları ve entegre bir şekilde cok iyi calışıyor olmalarıdır. Redux, literaturde Application State Management yani Uygulama Durum Yonetici olarak gecmektedir. React uygulamaları geliştirirken, state bileşenleri uzerinden geliştirme yapılmaktadır. Redux denilen yapı ise bu state bileşenlerini yonetmemizi sağlayan kutuphanedir.


React ile uygulama geliştirirken bileşenler (componentler) ve bu bileşenleri oluşturan stateler bulunmaktadır. Uygulamalarımızı geliştirdikce bileşenlerimiz artmakta, haliyle state yapılarımız da artmaktadır. Bu durumda bileşenleri yonetmek oldukca zorlaşmaktadır. İşte bu noktada Redux kullanmak tum bu karmaşanın arasından kurtulmamıza olanak sağlamaktadır.


Redux kutuphanesini biraz daha nesnel anlamaya calışırsak; yukarıda gorduğunuz resimde Redux kullanarak ve Redux kullanmadan bir uygulama bileşen şeması gosterilmiştir. Sırayla bunları ele alalım.


REDUX KULLANMADAN (WITHOUT REDUX):

İlk once Redux kullanmayan uygulamayı ele alalım; en ustteki yuvarlağımız app component yani uygulama bileşenidir. Aşağı doğru indikce diğer yuvarlak şekillerimiz bir usttekinin cocuk bileşeni olarak gecmektedir.

Uygulama bileşenindeki bir state yapısını alt sıralardaki cocuk bileşenlerde kullanmak icin aradaki tum cocuk bileşenlere ozellik (props) olarak, bu state yapısını aktarmamız gerekmektedir. Ayrıca alt sıralardaki bir cocuk bileşeninden, en baştaki uygulama bileşenindeki bir veriyi değiştirmek icin aradaki tum cocuk bileşenlere uğrayarak yine en yukarı cıkmamız gerekmektedir. Bu işlemlerin binlerce cocuk bileşeni olan bir uygulamada yapmak ne kadar zor olacağını tahmin bile edemeyiz. Şimdi bu işlem Redux olmadan yuruyen sistemdi, şimdi gelin Redux ile olan sisteme bakalım

REDUX KULLANARAK (WITH REDUX):


Redux kullanırken “store” diye bir terim ile karşılaşacaksınız. Store, aslında bir javascript objesi yani bir veri tabanı olarak da duşunebiliriz. Tam olarak veri tabanı tanımını karşılamıyor olabilir fakat tek bir state yapımız var olduğunu kabul edelim. Bu state yapımız, tek bir store uzerinde bulunuyor ve store, state yapımızı yonettiğimiz yerdir. Tum bileşenlerimiz bu store ’ye abone olmuş durumda yani dinleme halinde beklemektedir. Store ’de herhangi bir değişiklik olduğu anda ilgili bileşene bildirilmekte (notify) ve gerekli değişiklikler yapılmaktadır. Yani buradaki işleyiş aradaki cocuk bileşenlerle değil, direk store uzerinden gerekli bileşenler ile iletişime gecerek sağlanmaktadır.

Not: Redux, state gecmişini hafızasında tutmaktadır. Yani nasıl ki kod yazarken veya Word uzerinde yazı yazdıktan sonra CTRL+Z kombinasyonu ile en son yaptığımız değişiklikleri geri alıyoruz. Aynı işleyiş Redux ile de mumkundur.

OZET


Redux, bir javascript kutuphanesidir. State yonetiminin zorluğundan yola cıkılarak hazırlanmış bir kutuphanedir. Redux kutuphanesinin işleyişinin ana maddesi; tum bileşenler store yapısını dinleme durumunda bekler. Store yapısında herhangi bir değişiklik olduğunda, bu değişiklik ilgili bileşene aktarılarak gerekli değişikliğin yapılması sağlanır. React ile bir kan bağı yoktur fakat kullanıldığında inanılmaz derecede fayda sağlamaktadır.