React Native projesinde Redux nasıl kullanılır?

Proje büyüdükçe bileşenler arasındaki veri transferi karmaşıklaştığından Redux kullanımı tavsiye edilmektedir. Başlangıç örneklerinden çok anlamlı olduğu çıkarılamıyor ve hem React Native, hem de React ile kullanım videolarını izledim. Olayı özümseme adına burada adım adım anlatayım ki biraz daha kavrayayım diye düşündüm. O açıdan eksiklikler veya yanlış bilgiler olabilir -diğer tüm yazılarda olduğu gibi- vaktiniz var ise yorum ile uyarabilir, yine katkı sunmak veya birlikte yorumlayarak bir sonuca varmak içinde yorum yazabilirsiniz.

Daha derli toplu bir yazı okumak isterseniz: http://devnot.com/2018/redux-nedir/

Kaynaklar:
https://www.youtube.com/watch?v=KcC8KZ_Ga2M

https://github.com/nathvarun/WTF-Is-Redux-React-Native-Tutorials

Redux kütüphanesinde tek bir store ve tek bir state vardır, çok sayıda reducer olabilir.
Reducer pure fonksiyon olmak zorundadır yani sadece tek bir işlem yapmalıdır.

npm install –save redux : Ana redux kütüphanesi
npm install –save redux-thunk : Middleware işlemleri için gerekliymiş {Şu an için pek bilgim yok}
npm install –save react-redux : Bileşenler arası geçişi sağlamak için gerekli kütüphane.

Yukarıdaki üç kütüphaneyi projemize kurarak başlıyoruz.

App.js dosyamızın içerisinde:

satırı ile redux kütüphanesinde createStore objesini çağırıyoruz.

satırı ile store nesnemizi tutacak Provider bileşenini çağırıyoruz. Bu Provider sayesinde store içerisindeki verilerimiz tüm uygulama içerisinde istediğimiz yerde erişilebilir olacaktır.

satırı ile başlangıç durumunda sayacımızı 0’a eşitliyoruz.

reducer state ve action alarak işlem yapmaktadır.
Burada ilk başta initialState’i verdik, sonraki işlemlerde mevcut state alınır.
action.type a göre hangi işlem yapılacaksa o kısma switch ile geçilir.
Sonunda da her durumda state döndürülür.

store değişkenine oluşturduğumuz reducer’i createStore fonksiyonu sayesinde atıyoruz.

CounterApp.js dosyasında:

satırı ile connect bileşeni alınır. Bu nesne ile bileşende oluşan değişiklikler takip edilerek action oluşturulur.

fonksiyonu ile state deki bilgiler props a aktarılır.

fonksiyonu ile tetiklenen fonksiyonlar takip edilerek dispatch edilir.

satırı ile bileşenin hem export edilmesi hem de connect ile değişimin takip edilmesi sağlanmış olur.

Etiketler: , , , ,

Yorum Yapın