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.
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?
Ş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.
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.
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?
Ş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.