Merhaba arkadaşlar bu yazımda sizlere redux nedir? sorusuna cevap vermeye çalışacağım. Hadi başlayalım..
React.js ile proje geliştiriyorsanız redux terimiyle karşılaşmış ya da proje geliştiriyor olmanız lazım. redux, Dan Abramov ve Andrew Clark tarafından geliştirilmiştir.
İçindekiler
Redux Nedir?
Redux, javascript uygulamalarında state bileşenini yönetmeyi sağlayan javascript kütüphanesidir. Peki yönetmek derken ne demek istiyoruz? React.js ile geliştirilen proje componentlerden oluşur. Componentlerde kullanacağı veriyi props ya da state üzerinden alır. Kısaca props ve state bileşenlerinin görevinden bahsedeyim. Props, üst componentten aldığı veriyi alt componente taşır. State ise component içindeki durum bilgilerini saklar. Bir görsel ile daha net anlayabilirisiniz..
Neden Redux Kullanmalıyız?
Düşünsenize bir state’te tuttuğunuz verileri başka sayfalarda kullanmak istiyorsunuz. Veriye erişmek için sayfalar arası geçiş yapmak zorunda olacaksınız. Sayfalar arası geçiş işlemleri işin içinden çıkılmaz bir hâl alacaktır. Kısaca iç içe bileşenler kullanmaya başladığımız zaman state yönetimi oldukça zorlaşacaktır.
React’te tek yönlü veri iletimi söz konusu olduğundan dolayı, bileşenler ihtiyaç duydukları veriyi bir üst bileşenden almak zorundadır. Redux, veri erişiminin tek yönden yönetilmesinin yanında iç içe bileşen kullansak bile state yönetimini kolaylaştırmak için tasarlanmıştır. Redux’ta state verileri store adı verilen bir yerde tutuluyor.
Redux öncesine ve redux sonrasına ait bir görsel bırakmak istedim. Redux state kullanımız oldukça kolaylaştırıyor..❤
Redux Bileşenleri
- Action, state güncelleneceği zaman action tarafından tetiklenmesi gerekiyor. Neyi güncellemesi gerektiğini adlandırırken “type” ile belirtmemiz gerekirken, değiştirmesi gereken veriyi payload’larla taşır.
- store, redux kütüphanesi ile yaratacağımız verilerin tutulacağı yer diyebiliriz. Kısaca sanal veritabanıda denebilir. Projemizde tek bir store olacak ve statelerimiz store içinde tutulacak.
- reducer, action tarafından store’a iletilen veriyi alıp uygulama içerisindeki sayfalarda kullanmamızı sağlar.
- provider, store’un tüm uygulamaya etkisini göstermesini sağlayan ve uygulamanın etrafını sarmalayacak olan bir yapıdır.
- connect, component’leri store’a bağlamaya yarayan nesnedir.
Bu yazımızda redux hakkında bilgi vermeye çalıştım. Umarım sizler için faydalı bir yazı olmuştur. Diğer yazılarımıza göz atmak için sayfamızı ziyaret edebilirsiniz. İsterseniz linkteki videoyu izleyebilirsiniz.