Redux nedir, neden ihtiyaç duyarız?

Phoique 7

Katılımcı Üye
14 Mar 2017
505
1
Manisa
Redux nedir?
Merhabalar hepinize ilk önce şunu söyleyim ki, react öğrenen veya bilenlerin sık sık duyduğu bir javascript frameworküdür. O yüzden bu konuyu anlamanız için react biraz bilmeniz gerekiyor. React projelerinizde proje ilerledikçe, geliştikçe state yönetimi çok zor olur.

tumblr_inline_ofcyamw87F1rgj0aw_500.png


Yukarıdaki resimde App componenti ana component olsun diyelim. TableRow adlı componente App componentten bir state göndereceğiz mesela. Bunun için App'den MainPage props olarak sonra ComparisonTable props olarak sonra TableRow gönderek en sonunda o state alacağız. Hadi bunu çözdük diyelim ya 40 kat içerideki componente değer göndersek nolur ondan ona ondan ona derken ne yazdığını unutur adam.

Bunu çözmek için redux çıkmış ve ayrılmaz ikili gibi benimsenmiş neredeyse. Hem state yönetimi neyin nereden geldiğini görme biraz daha fazla kod yazıyor olabilirsiniz ama hata ayıklamada çok işinize yarıyor redux.

Redux nasıl çalışıyor?


68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6d656469612d702e736c69642e65732f75706c6f6164732f3336343831322f696d616765732f323438343535322f415243482d5265647578322d7265616c2e676966


Şimdi buradaki bazı terimleri açıklayalım.
Action: Kullanıcının bir aksiyon yapması, butona basmak text girmek gibi.
Store: Reducer'lerin içinde bulunduğu bir veritabanı gibi düşünebilirsiniz Store veritabanı mesela reducer ise tablo diyelim. Store içinde birden fazla reducer olabilir. userReducer, actionReducer gibi gibi.
Reducer: Store içinde parçalara ayrılmış, state tutandır.
Dispatch: Action taşıdığı state, store içinde reducer içinde bulunan state değiştirmeye yarar.
State: En son kısımdaki state ise, artık reducer içinde action tarafından gelen state değerini almış state'dir.

Şöyle bir örnek verelim mesela kullanıcı bir butona basacak ve üstteki a yazısı b olacak. Kullanıcı butona bastı, Hop action içine bu yeni değer aldı bu action dispatch edilerek store içindeki reducer yerini alıyor ve state güncellenerek yeni değer kullanıcıya gösteriliyor. Aslında redux anlatmak da anlamak da zor gibi görünüyor ama basit bir yapısı var bakmayın böyle göründüğüne. Bir örnek kod da yazıp konuyu bitirmek isterdim ama zor geldi eğer konu ilgi görür ve react üzerinde örnek gösterir misin diyen olursa örnek de yazabilirim kalın sağlıcakla.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.