Redux Nedir ? React’la ne alakası var ? Fulux’la aralarında akrabalık var mı ?

Merhaba sevgili yazılım aşıkları,

Yazı dizisinin başında [yazi]

React Js ile başlayacağım yazılarıma React Native, Arduino ardındanda Mobil uygulamalar ve Gömülü sistemleri içerisinde barındıran bir projenin yazı dizisiyle devam etmeyi planlıyorum.

demiştim. Artık React konulu yazı dizisinin sonu geldik. Bu yazıdan sonra React Native tarafına geçebiliriz. Artık React Native ile mobil uygulama geliştirmeye başlamak için yeterli bir temelimizin oluştuğuna inanıyorum.

Bu yazının konusuda Flux ve Ecmascript 6 gibi React projesinin kapsamında değil. Kodlama yaparkan Ecmascript 6 standartlarına göre kod yazmamız gerektiği için Ecmascrpit 6 konusunua bu yazı dizisi içerisinde yer verdim. Flux ve Redux yazılarına ise uygulama genelinde State yönetimini kolaylaştırmak için yer verdim.

Bu yazıdan sonra Ecmascript 6 standartlarına uygun bir şekilde Redux State Management kullanarak. React Native uygulamarı geliştirmeye başlayabiliriz. React Native yazı dizisinden sonra Arduino ve Gömülü Sistemleri incelediğimizde günümüzün popüler konularından olan Internet of Think üzerine güzel projeler geliştirmeye başlayabiliriz.

Yazı dizisine başlarken dediğim gibi kesinlikle şu tarihe kadar bitiririm diye söz vermiyorum :)

Bu yazıya başlamadan önce Flux yazımı okumanız konuyu anlamamızı kolaylaştıracaktır. Şöyle desem daha doğru olacak Flux konusu Redux’u daha kolay anlatabilmek için yazıldı :) Hemen geri dön. Lütfen :)

Flux ve React facebook tarafından başlatılan birer proje akrabalıkları oradan geliyor. Redux ise Flux’ın yaptığı işi biraz daha geliştirerek Js tabanlı projelerde bizim elimizi güçlendiriyor. State yönetiminde hakimiyetimizi arttırıyor.

Nedir Şu Redux Dedikleri ?

Redux Temelde Flux daki gibi uygula içerisindeki kontrolsüz bir şekilde akan datayı kontrol altına almak için geliştirilmiş bir teknoloji Flux dan farklı olarak statelerin önceki durumlarına geri dönme gibi artıları var.

Redux Yapısı

Redux Kurulum Aşaması

Redux Veri Akışı

Adım Adım Redux Projesini Ayağa Kaldıralım

Kurulum

Örnek Projede React Native şablonu kullanılmıştır. Bir sonraki yazıda ayrıntılı olarak React Native Kurulumu anlatılacaktır. Kurulum adımları buradan ulaşabilirsiniz.

Aşağıdaki kodların çalışabilmesi için Redux, React-redux, Redux-thunk paketlerini npm veya yarn üzerinden projenize indiriniz.

Action Creator Kurulum

src/actions/types.js

src/actions/islemAction.js

src/actions/index.js

Reducer

src/reducers/IslemReducers.js

src/reducers/index.js

Componet Oluşturma Connet Yapısının Kullanımı

src/components/Islem.js

Store Oluşturma, Provider Kullanımı ve ReduxThunk

src/Main.js

İos ve Android Ortak bir noktadan Register Ekleme

index.android.js

index.ios.js

GitHubLinki

arifkoken/ReactNative-Redux