Web Sürümünü görüntüle

Redux nedir?

Redux nedir?

Redux, JavaScript uygulamalarında durum yönetimi için kullanılan bir JavaScript kitaplığıdır. Redux, uygulamanın genel durumunu merkezi bir depoda (store) tutar ve bu depo üzerinden durum değişikliklerini yönetir. Bu, özellikle büyük ve karmaşık uygulamalarda, uygulama durumunu etkili bir şekilde yönetmek için kullanılır.

Redux, birçok farklı JavaScript çerçevesi ve kütüphanesiyle (örneğin, React, Angular, Vue.js) kullanılabilir, ancak en sık React ile birlikte kullanılır. Redux, React ile birleştirildiğinde, React uygulamalarındaki durum yönetimi için yaygın bir tercih haline gelir.

Redux'ın temel amacı, uygulama durumunu daha tahmin edilebilir ve yönetilebilir bir şekilde yapmak, durum değişikliklerini izlemek ve güncellemek için merkezi bir yer sağlamaktır. Bu, uygulamalarda veri akışını daha iyi kontrol etmeyi ve hataları azaltmayı sağlar.

Redux, özellikle büyük ve karmaşık uygulamalar için yararlıdır, ancak daha küçük projelerde veya basit uygulamalarda kullanmak gerekmeyebilir. Redux, ayrıca öğrenilmesi gereken ekstra bir karmaşıklık getirebilir, bu nedenle kullanmadan önce projenizin ihtiyaçlarına göre değerlendirmeniz önemlidir.

Temel bileşenler

Redux'ın temel bileşenleri şunlardır:

  1. Store: Redux'ın merkezi bileşeni olan "store," uygulamanın tüm durumunu içeren bir nesnedir. Bu durum, uygulamadaki tüm bileşenler tarafından paylaşılır ve merkezi bir yerde tutulur.

  2. Action: Redux'da, uygulamada gerçekleşen her türlü etkileşimi veya olayı temsil eden eylemlerdir. Eylemler, bir tür (type) ve ilgili verileri içeren bir nesne olarak tanımlanır.

  3. Reducer: Reducer'lar, eylemlere dayalı olarak mevcut durumu güncellemek için kullanılır. Her reducer, belirli bir eylem türüne yanıt verir ve durumu güncelleyerek yeni bir durum nesnesi döner.

  4. Dispatch: Eylemleri tetiklemek için kullanılan bir yöntemdir. Eylemler, bu yöntem aracılığıyla store'a iletilir ve durumu güncellemek için reducer'lara iletilir.

  5. Subscribe: Store'daki durum değişikliklerini dinlemek için kullanılır. Bu, uygulamanın farklı bileşenlerinin durumu dinlemesine ve bu duruma tepki vermesine olanak tanır.

Redux ile React’ın birlikte anılmasının sebebi, birlikte popüler olmaları ve entegre bir şekilde çok iyi çalışıyor olmalarıdır. Redux, literatürde Application State Management yani Uygulama Durum Yönetici olarak geçmektedir. React uygulamaları geliştirirken, state bileşenleri üzerinden geliştirme yapılmaktadır. Redux denilen yapı ise bu state bileşenlerini yönetmemizi sağlayan kütüphanedir.

React ile uygulama geliştirirken bileşenler (componentler) ve bu bileşenleri oluşturan stateler bulunmaktadır.  Uygulamalarımızı geliştirdikçe bileşenlerimiz artmakta, haliyle state yapılarımız da artmaktadır. Bu durumda bileşenleri yönetmek oldukça zorlaşmaktadır. İşte bu noktada Redux kullanmak tüm bu karmaşanın arasından kurtulmamıza olanak sağlamaktadır.

1535450857_image1.png

 

Redux kütüphanesini biraz daha nesnel anlamaya çalışırsak; yukarıda gördüğünüz resimde Redux kullanarak ve Redux kullanmadan bir uygulama bileşen şeması gösterilmiştir. Sırayla bunları ele alalım.

Redux kullanmadan

İlk önce Redux kullanmayan uygulamayı ele alalım; en üstteki yuvarlağımız app component yani uygulama bileşenidir. Aşağı doğru indikçe diğer yuvarlak şekillerimiz bir üsttekinin çocuk bileşeni olarak geçmektedir.

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

Redux kullanarak

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 düşünebiliriz. 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 üzerinde bulunuyor ve store, state yapımızı yönettiğimiz yerdir. Tüm 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 çocuk bileşenlerle değil, direk store üzerinden gerekli bileşenler ile iletişime geçerek sağlanmaktadır.

Not: Redux, state geçmişini hafızasında tutmaktadır. Yani nasıl ki kod yazarken veya Word üzerinde 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 mümkündür.

Özet

Redux, bir javascript kütüphanesidir. State yönetiminin zorluğundan yola çıkılarak hazırlanmış bir kütüphanedir. Redux kütüphanesinin işleyişinin ana maddesi; tüm 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.

Web sitemizde gezinme deneyiminizi geliştirmek, size kişiselleştirilmiş içerik ve hedefli reklamlar göstermek, web sitesi trafiğimizi analiz etmek ve ziyaretçilerimizin nereden geldiğini anlamak için çerezleri ve diğer izleme teknolojilerini kullanıyoruz. Çerezlere ilişkin daha detaylı bilgiye Çerez Politikası sayfamızdan ulaşabilirsiniz.