React Native Redux Kurulumu ve Kullanımı

React Native ile uygulama geliştirirken ihtiyaç duyacağımız çok önemli kütüphanelerden bir tanesi de Redux yapısıdır. Redux, state yönetimini yapmamızı sağlamaktadır.

Redux’ a Neden İhtiyaç Duyarız

Uygulama içerisinde sayfalar içerisinde state te yer alan değişkenleri diğer sayfalarda kullanma ihtiyacımız olabilmektedir. Böyle durumlarda sayfalar arasında geçiş yaparken bu değerleri de göndermekle uğraşmaktayız. Bu durum özellikle küçük olmayan uygulamalarda ciddi karışıklığa sebep olmaktadır. 

Bir diğer problem ise başka sayfalardaki state te yer alan değeri kullanırken onun güncel değerini elde edemeyebiliriz. Bunu elde etmek için kırk takla atmamız gerekebilir.

İşte tüm bu sıkıntılardan bizi kurtaracak hatta daha da rahat hareket edebileceğimiz imkanı Redux sağlamaktadır.

Action

Kullanacağımız değeri store a atmamızı sağlayan yapıdır. Oluşturduğumuz action a istediğimiz değeri vererek, bu değeri store a atabiliriz. store a atma işini dispatch fonksiyonu ile yaparız. dispatch fonksiyonumuzun içerisinde 2 değer tutarız. Bir tanesi type adında spesifik bir değerdir. Diğeri ise payload,  bu da store da tutmak istediğimiz değer.

Mesela uygulamamızda ücretsiz ve ücretli duruma göre reklam kaldırma ya da çeşitli özellikler olduğunu farzedelim. Bu durumda uygulamada ücret verilip verilmediğini ilk başta elde edip store a atarak diğer sayfalarda ona göre fonksiyonları çalıştırabiliriz.

Aşağıdaki örnekte action purhcase değişkenini alıyor. Bu değerin tipi tamamen size bağlı. İster array ister string ister boolean. Biz bu örnekte boolean olarak yola devam ediyoruz ve action aşağıdaki gibidir. 

export default setPurchase = (purchase) => {
    store.dispatch({
        type: 'SET_Purchase',
        payload: {
            purchase
        }
    })
}

Burada store objesi birazdan oluşturacağımız objedir. Bunu action içerisinde üstte bir yerlere import ediyoruz.

Reducer

Action tarafından store a itilen değeri alıp uygulama içerisindeki sayfalarda kullanmamıza olanak sağlayacaktır. Burada hangi action dan elde edilen içerik kullanılacaksa oradaki action tipine göre hareket edeceğiz. Üsteki örneğe göre bir action oluşturduğumuza aşağıdaki durum oluşacaktır.

var purchase = false

var initialState = {
    purchase,
}

const RPurchase = (state = initialState, action) => {
    switch(action.type) {
        case 'SET_Purchase':
            return Object.assign({}, state, { purchase: action.payload.purchase })
        default:
            return state;
    }
}

export default RPurchase

Örnekte görüldüğü üzere purchase değişkeni case SET_Purhcase olduğunda yani üstteki action tipi ile aynı olduğunda verilecek değerdir.

Birden fazla reducer kullanabiliriz. Bu durumda bunları aynı klasörde index.js dosyası oluşturarak içerisinde export ederek store tarafından erişimini kolaylaştırabiliriz.

import RPurchase from './RPurchase'
import RFarklıBirsey from './RFarklıBirsey'
import {combineReducers} from 'redux'

const allReducers = combineReducers({
    RPurchase,
    RFarklıBirsey,
})

export default allReducers

Store

Burası ise bir bakıma sanal veritabanımız da diyebileceğimiz alanımızdır.

import { createStore } from 'redux'
import allReducers from '../reducers'

const store = createStore(allReducers)
export default store

Kurulum

npm install redux react-redux --save

komutu ile kurulumu gerçekleştiriyoruz.

Kullanım

Yönetmek istediğimiz state leri ya da değerler için ayrı ayrı action, reducer oluştururuz. Bir tane de oluşturabilirsiniz ancak kolaylık açısından biz hepsi için ayrı oluşturacağız.

Uygulamamızda ücretli ve ücretsiz durumlarda çalışacak fonksiyonlar olduğunu söylemiştik. Bu duruma göre mesela ücretsiz durumda reklam çıksın diğer durumda çıkmasın olarak basit birşey yapalım.

Öncelikle satın alma işlemleri için hangi kütüphaneyi kullandı iseniz o kütühaneden uygulamanın satın alınıp alınmadığı bilgisini aldığınızı düşünelim. Dosyamıza ilgili action dosyasını import ediyoruz.

import setPurchase from './src/redux/actions/APurchase'

Bu duruma göre uygulama satın alındı ise;

setPurchase(true)

Satın alınmadı ise;

setPurchase(false)

Biz boolean bir değişken kullandık. Siz burada istediğiniz tipte verebilirsiniz.

Bu işlemleri App.js dosyası içerisinde yaptık. Peki yeterli mi? Hayır. Yapmamız gereken diğer durum ise kullanılacak olan store uygulamayı dıştan bağlamalıdır. Bu sebeple render içerisindeki return fonksiyonumuzu altaki tag lar ile sarıyoruz. Yani halihazırda yer alan return fonksiyonunun içerisindeki elemanları alttaki tag ın içine alıyoruz.

<Provider store={store} UNSAFE_readLatestStoreState={true}>
</Provider>

Tabi Provider ve store import etmeyi de unutmuyoruz.

import store from './src/redux/store'
import { Provider} from 'react-redux'

Şimdi gelelim sayfa içerisinde bu değişkene erişmeye. Öncelikle import edeceğimiz kütüphaneleri yazalım.

import {connect} from 'react-redux'

Sayfamızdaki class (sınıf) yapımızı aşağıdaki gibi duruma getiriyoruz. connect yapısı ile store a bağlama işini yapıyoruz. Sınıfımızı aşağıdaki şekle getiriyoruz. Yani en başta export vs yapmıyoruz.

class BizimSınıf extends Component

En altta da connect işlemini ve hangi reducer kullanılacaksa onları ekliyoruz.

const mapStateToProps = (state, ownProps) => ({
    purchase: state.RPurchase.purchase,
})

BizimSınıf = connect(mapStateToProps)(BizimSınıf)

export default BizimSınıf

Evet artık purchase değişkenimize erişebiliriz. Buna erişmek için de istediğimiz yerde şunu kullanıyoruz.

this.props.purchase

Eğer bu değerimiz true ise ücreti ödenmiş demektir. Yani reklam çıkartma deriz. false ise de ücretsiz kullanıldığını belirtir ve reklam çıkartırız.

React Native uygulamalarımızda redux kullanımı bu kadar.

Teşekkürler.