İçeriğe geç

React Native Redux Kullanımı

Redux

Redux, Dan Abramov adında bir vatandaşın yarattığı javascript kütüphanesidir. Redux’ı React ile ayrılmaz bir bütün olarak olmazsa olmazı olarak düşünmeyin. Birlikte çok anılmalarının sebebi; birlikte popüler olmaları ve çok güzel entegre bir şekilde çalışabilmelerinden kaynaklıdır. Redux’ın ana amacı state’leri tek bir yerden yönetmektir. Application manage statement (uygulama durum yöneticisi) olarak geçer.

React Uygulamalarında Karşılaşılan Temel Problem

React ile kolayca başlayıp ilerlettiğiniz projenizde sonraki aşamalarda uygulama karmaşıklaştıkça, iç içe bileşenler arasındaki state yönetimi gittikçe güçleşir. Hangi verinin hangi bileşenden geldiğinin takibi zorlaşır. Aşağıdaki örneği ele alalım:

Örneğimizde 4 adet bileşen bulunuyor. React’te tek yönlü veri iletimi söz konusu olduğundan dolayı, bu bileşenler ihtiyaç duydukları veriyi bir üst bileşenden almak zorunda. 4. bileşenin ihtiyaç duyduğu veri 2. bileşende ve 3. bileşende bulunuyor. 4. bileşen 2. bileşendeki state’e direkt olarak erişemediği için 3. bileşenden alma gereksinimi doğuyor. 3. bileşen de hiç gerekmediği halde 2. bileşenin state’ini içermek durumunda kalıyor. Bu nedenle de uygulamadaki state yönetimi güçleşiyor.

Peki Neden Redux’a İhtiyacımız Var?

Redux, veri erişiminin tek bir yerden yönetilmesinin yanında, yukarıda anlattığımız state aktarımından doğan problemi de çözmek üzere tasarlanmıştır. Redux’ta bütün state verileri store adı verilen bir yerde tutulur. Böylece üst seviye bileşenden alt seviye bileşene state aktarımına gerek kalmaz. Her bileşen, uygulama state’ine store aracılığıyla erişim sağlar. Veriler, tek bir sorgulama kaynağından (store) getirildiği için, hangi state nereden gelmiş gibi bir veri takibine gerek kalmamış olur. Bu sayede, oluşan kod Redux ile daha temiz hale gelmiş olur.

Action, Reducer ve Store

Redux’ta veri aktarımı bu 3 eleman vasıtasıyla gerçekleştirilir ve UI’a sunulur.

Şimdi gelelim bir örnek ile react-native ve redux kullanımını pekiştirmeye.

Öncelikle ne nedir dersek:

Action

Action’lar içinde “type” isimli bir string değişkeni tutan bir Javascript nesnesidir. dispatch(action) fonksiyonu ile store içine aktarılır.

Reducer

Reducer’lar, action sonucunda uygulamanın var olan state’i değiştirmesini sağlar. Başka bir deyişle, action uygulamaya sadece veri döndürür, uygulamanın değişikliğinin state’e aktarılması ise reducer tarafından olur.

Store

Store işlemi, action ve reducer’ı bir araya getirip yapıyı bağlar. Uygulamanın state’in tutulması, state’e erişim (getState()), state’in güncellenmesi (dispatch(action)), state’e listener bağlanması (subscribe(listener)) gibi işlemler store üzerinden yönetilir.

Redux Demo 1

Redux ile temeller daha sağlam anlaşılabilir olması açısından küçük örnek.

Öncelikle yeni bir uygulama başlatalım.

react-native init reduxDemo1

Ardından gerekli kütüphane kurulumlarını yapalım

yarn add redux
yarn add react-redux

Projenin mantığı redux kullanarak state değiştirmek. Burada en klasik örnek olan sayı +1, -1 ve +2 değişim işlemlerini yapıcaz ve her biri component olarak ele alınacak.

Kabaca şu işlemleri yapacak bir uygulama. Burada 4 component olacak bunlar sayımızın olduğu alan, (-1),(+1),(+2).

Dosya yapımız şu şekilde olmalı:

Burada bir çok dosya ismi görünmüyor bunun için şöyle bi ayar yapabilirsiniz.

VSCode ayarlar kısmından

actions/actionTypes.js

Bunlar bizim uygulama içinde yapacağımız aksiyonlarımız.

Şimdi sıra bu aksiyonların içeriklerini yazmaya, ismini uygulamaya uyumlu olması açısından counterActions.js koyalım.

actions/counterActions.js

burada import * as actionTypes from ‘./actionTypes’; şeklinde import ettik.

“*” ifadesi ile actionTypes.js içerisinde 3 adet action olduğundan hepsini almak için bu şekilde kullandım. Eğer tek bir değer olsaydı doğrudan onun isminde de alınabilirdi.Ayrıca uygulama genişledikçe actionTypes.js dosyalarımız farklı isimlerde birden fazla olabilir.

Bir arttırma fonksiyonumuz:

burada açıklamak gerekirse: increaseCounter isminde fonksiyonumuz var ve bu fonksiyon bir fonksiyon geri döndürüyor. Parametreside bir objedir. Parametrenin obje olduğunu

bu alandan anlıyoruz.

increaseCounter fonskiyon olduğunu ise = () alandan anlıyoruz. Bir fonksiyon geri döndürdüğünü ise objeyi sarmalayan () parantezlerinden anlıyoruz.

Buraya kadar işlemler tamam ise örneğe daha yukarıdan bakıcak olursak şöyle bir işleyiş olacaktır.

Biz +1 butonuna bastığımızda increaseCounter() fonksiyonunu tetikleyecektir. Fonskiyonumuzda Reducer’a gidip bu type ve bu payload ile bana talep geldi der.

reducer/counterReducer.js

gelen type ile switch yapımız karşılık verir.

reducer/index.js

burada yapılmak istenen birden fazla olacak reducerlarımızı toplarlamak bu nedenle

import {combineReducers} from ‘redux’ kütüphanemizden faydalanıyoruz.

reducer/configureStore.js

tüm reducerslarımızı store’a bağlıyoruz.

uygulama ana dizinimizde bulunan index.js

bu dosyamıza 5, 6 ve 8. satırlar eklendi.

10. satırdaki RNRedux fonksiyonumuz ise App componentimiz Provider ile sarmalandı.

Artık ayar kısımları bitti kullanıma hazır.

App.js dosyamız:

 

./src/components/Counter.js dosyamız:

Component oluştururken önemli nokta redux ile haberleşmesi bu işlem için componentlerin export işlemlerini biraz değiştiriyoruz.

  1. Component ile redux bağlantı işlemini yapan import {connect} from ‘react-redux’; kütüphanemiz.

  2. export default connect(mapStateToProps)(Counter); ile Counter componentimizi bağlama işlemi yapıyoruz.

  3. mapStateToProps() fonksiyonu ise tam olarak şu şekilde görev yapar “state’leri bağla propslara”

  4. return {counter: state.counterReducer} aranan statelerimiz counterReducer içinde olduğu için tanımlamamızı bu şekilde yaptık. Çünkü counterReducer içinde const counterReducer = (state = 0, action) => bu tanımlama işlemi gerçekleştirdik. Eğer state atama varsa ise switch ile onu buluyoruz yoksa default 0 veriyoruz.

  5. state.counterReducer şeklinde reducer’lara ulaşabilme sebebimizde index.js içinde

uygulamamızı kapsayan bir reducer’lar topluluğuna bağlamamızdır.

Eğer hatasız şekilde yapıldıysa işlemler şu şekilde bir çıktı almalıyız.

IncreaseCounter , DecreaseCounter , IncreaseByTwoCounter componentlerini şu aşamada standart view – text olarak bırakabilirsiniz.

Burada “0” değerimiz counterReducer.js dosyamızda yer alan const counterReducer = (state = 10, action) => { alanındaki state = 0 değerinden gelmektedir. Kısaca başlangıç için default değer atamış olduk. Şimdi diğer componentlerimize geçelim.

./src/components/IncreaseCounter.js dosyamız:

TouchableOpacity ile buton onPress işlemi yaptığımızda burada daha önce oluşturduğumuz aksiyonu çağırdık increaseCounter() işlemi tetiklendiğinde bizim bu fonksiyon içine yazdığımız işlem state+1 olduğu için counter değerimiz değişmiş olacak.

./src/components/DecreaseCounter.js dosyamız:

./src/components/IncreaseByTwoCounter.js dosyamız:

Aslında bu kadar basit.

Tarih:React Native

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir