React Redux Duck Approach Ve Injection Middleware ve Operasyon Katmanı
- Redux Nedir ?
- Injection Middleware
- Duck Aproach
Redux Nedir ? Sorusuna ansiklopedik tanım yazmak yerine bende ne ifade ediyor sizler ile onu paylaşmak istiyorum. Aslında redux ‘ı anlayamıyorsanız react da state ve props lara biraz daha odaklanmanızı öneririm. Redux ın yaptığı iki önemli iş var aslında. Her yerden ulaşılabilir state yazmak ikinci olarak ise yazdığımız methodları yine aynı şekilde heryerden ulaşabilir yapmak. Aslında burada redux’ı nerelerde kullanmalıyım sorusuna cevap verebiliriz. Bir state birden fazla yerde kullanılacak ise redux da durmalı aynı şekilde method içinde geçerli. Uygulamanız da ki herşeyi redux ta tutmanıza gerek yok yani. En basit yaklaşım aslında UI statelerini redux ta tutmak. Yani bir birlerini tetikleyen componentler redux da durmalı.
Örnek olarak :
Bir Login Modal düşünelim, Her zaman bu login modal bir “giriş yap” buttonuna basınca açılmaya bilir. Kullanıcı giriş yapmadan sepetine bakmak isteyebilir ve eğer giriş yapmış kullanıcımız yok ise önce giriş yap yerine direk modallımızı açmamız gerekebilir özellikle bu componentler ortak atadan gelmiyorsa sorun burda başlıyor. Redux kullanmadan çözüm yolu ; isAuthModalOpen diye bir statetimiz olduğunu varsayalım ve bu true ise AuthModal lın render edildiğini varsayıyoruz. Redux kullanmadan yapacağımız bu state ve bu stateti set eden methodu bu iki componentin en üstüne tanımlayıp component ağacında ileterek gidiyoruz. Eğer redux a sahip isek sadece gereken componentlerde mapStateToProp olarak isModalAuthOpen statemizi props olarak componentimize alıyoruz. Aynı şekilde onu tetikleten set Methodunuda mapDispatchToProps olarak componentimize alıyoruz. Redux’ın en basit mantığı bu aşağıdaki resim bunu anlatıyor aslında :)
Adım Adım projemize Redux kuralım : Gerekli paketlerimiz : ‘redux, redux-thunk,react-redux’
Burada bir store oluşturduk. Store dediğimiz adamda aslında tekbir Obje bu objenin içerisinde satır 4–5–6 da tanımladığımız kendi objelerimiz var. Bunlar daha sonra yazacağımız reducer den gelecek. Dağıtmadan devam edelim , 9.satır tarayıcı redux eklentisi için yani uygulamamız ile ilgisi yok. combineReducer ilede 4–5–6. satırlarda tanımladığımız diğer Objeleri tekbir obje haline getiriyoruz.16.satır ilede bir middleware ekledik, bu bizim asenkron işlemlerimizi handle edecek bir middleware. İlerleyen kısımlarda hepsini detaylandıracağız.
