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:

import {createStore} from 'redux';

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

import {Provider} from 'react-redux';

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.

 const initialState ={counter:0}

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

const reducer = (state=initialState, action) => {
switch(action.type){
case 'INCREASE_COUNTER' : return {counter:state.counter+1}
case 'DECREASE_COUNTER' : return {counter:state.counter-1}
}
return state
}

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.

const store = createStore(reducer);

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

render(){
return(

 // Ana bileşen

)
}

CounterApp.js dosyasında:

import {connect} from 'react-redux'

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


function mapStateToProps(state){
return {
counter:state.counter;
}
}

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


function mapDispatchToProps(dispatch){
return {
increaseCounter : () => dispatch({type:'INCREASE_COUNTER'}),
decreaseCounter : () => dispatch({type:'DECREASE_COUNTER'}),
}
}

fonksiyonu ile tetiklenen fonksiyonlar takip edilerek dispatch edilir.

export default connect(mapStateToProps,mapDispatchToProps)(CounterApp)

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

ASKON Konya’da MEVKA TeknoGirişim Girişimci-Yatırımcı Buluşmaları’na katıldım

ASKON Konya’nın MEVKA TeknoGirişim Girişimci-Yatırımcı Buluşmaları kapsamında 23 Ağustos 2023 Çarşamba günü ASKON Konya şubesinde>>>

24
Ağu

Matlab’da matrisin tüm elemanlarını belirli bir sayıdan nasıl çıkarırız?

Elimizde doğruluk oranlarının olduğu bir k matrisi olduğu varsayalım, bu matris içerisindeki tüm değerleri 1>>>

22
Şub

Matlab’ta iç içe döngüyle matris gezerek istediğimiz veriyi nasıl buluruz?

Başlık tam ifade eder mi bilmiyorum ama benim ihtiyacım olan şey 10 sütun, 1593 satıra>>>

20
Şub

A Review on Deep Learning-Based Methods Developed for Lung Cancer Diagnosis

Yüksek Lisans öğrencilerimden Türkan Beyza KARA’nın sunmuş olduğu “A Review on Deep Learning-Based Methods Developed>>>

09
Oca

İlk yabancı yazarlı ortak makalem yayınlandı

Birbirimizi hiç görmeden ve sesli olarak da hiç konuşmadan e-posta üzerinden tanışıp ortak bir çalışma>>>

4 Comments

21
Eki

Konya’da göz lazer ameliyatı oldum

25 yıldır takmakta olduğum ve kendisinden ayrılırken 6,5 numara olan gözlüğüme Konya’da göz lazer ameliyatımı>>>

21
Ağu

Tek kelimeyle beni nasıl tanımladılar?

YouTube üzerinden yapmış olduğum bir yoruma gelen yanıtta “…dürüst olun…” içeriğini görünce aklıma geçtiğimiz günlerde>>>

3 Comments

02
Ağu

Konya Akıllı Şehir HACKATHON’unda 3.olduk

Kısaca daha önceki yazımda bahsettiğim Konya Akıllı Şehir HACKATHON’unda 3.olduk. Selçuk Üniversitesi Teknoloji Fakültesi Bilgisayar>>>

1 Comment

29
May

Sentius ekibi olarak, Akıllı Şehir HACKATHON’una katıldık

Konya Akıllı Şehir HACKATHON’unda 3.olduk Konya Bilim Merkezi ile GDG Konya’nın düzenlediği Akıllı Şehir HACKATHON’una>>>

1 Comment

29
May

BİLMÖK 2022 için yazılmış gecikmiş bir yazı :)

Türkiye’nin en büyük öğrenci kongresi BİLMÖK 21-23 Mayıs 2022 günlerinde Konya’da Konya Teknik Üniversitesi’nin organizasyonuyla>>>

24
May

Genç Bakış Gazetesi’nden Beyzanur Polat’ın yaptığı haber…

Genç Bakış Gazetesi’nden Beyzanur Polat’ın yaptığı haber…>>>

22
Kas

Binary Sooty Tern Optimization Algorithms for solving Wind Turbine Placement Problem

Binary Sooty Tern Optimization Algorithms for solving Wind Turbine Placement Problem İndirmek için tıklayınız.>>>

10
Eyl

Konya Model Fabrika’yı Ziyaretim ve Konya Dijital Dönüşüm

“konya dijital dönüşüm” kelimesini Google üzerinden arattığım zaman Konya Model Fabrika‘yı keşfettim. 5 Ağustos 2021>>>

06
Ağu

Otomatlar, Biçimsel Diller ve Turing Makineleri – Dr. Emre Sermutlu – Cinius Yayınları

2020-2021 bahar yarıyılında Otomata Teorisi ve Biçimsel Diller dersini verirken kullanmam için Selçuk Üniversitesi Teknoloji>>>

21
Mar

4-6 MART 2021 ÇEVRİMİÇİ TÜBİTAK-2237-B PROJE EĞİTİMİ ETKİNLİĞİ KTÜ – TRABZON

Alanında dünyada öncü Prof. Dr. Yener EYÜBOĞLU, Prof. Dr. Asım KADIOĞLU, Prof. Dr. Nurettin YAYLI,>>>

06
Mar

ARDEB 1001 – 2020 Sonuçlarını Değerlendirme ve Yenilikler Toplantısı

>>>

19
Şub

2021 yılı içerisinde değerlendirilebilecek konferanslar

GLOBAL CONFERENCE on ENGINEERING RESEARCH online 2-5 June 2021 Abstract or Full Paper Submission: 2>>>

08
Şub

Sayfamda paylaştığım bütün Karikatürler silinmiştir

İsimsiz bir uyarı yorumuyla araştırdığım vakit gördüm ki bazı karikatüristler blog sayfalarında karikatür paylaşanlara dava>>>

23
Oca

MATLAB – Error: Functions cannot be indexed using {} or . indexing.

data = get(z9).OutputData{1}; satırında aşağıdaki şekilde hata vermekteydi. Error: Functions cannot be indexed using {}>>>

16
Oca

“ERASMUS+ Yüksek Öğretim” konulu seminer notları

“ERASMUS + Yüksek Öğretim” konulu seminer notları Dr. Öğretim Üyesi Kemal TÜTÜNCÜ hocam tarafından sunulan>>>

01
Oca

React Native