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 reduxDemo1Ardından gerekli kütüphane kurulumlarını yapalım
yarn add redux
yarn add react-reduxProjenin 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
|
1 2 3 |
export const INCREASE_COUNTER = 'INCREASE_COUNTER'; export const DECREASE_COUNTER = 'DECREASE_COUNTER'; export const INCREASE_BY_TWO_COUNTER = 'INCREASE_BY_TWO_COUNTER'; |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import * as actionTypes from './actionTypes'; export const increaseCounter = () => ({ type: actionTypes.INCREASE_COUNTER, payload: 1, }); export const decreaseCounter = () => ({ type: actionTypes.DECREASE_COUNTER, payload: 1, }); export const increaseByTwoCounter = () => ({ type: actionTypes.INCREASE_BY_TWO_COUNTER, payload: 2, }); |
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
|
1 2 3 4 |
{ type: actionTypes.INCREASE_COUNTER, payload: 1, } |
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.
|
1 2 3 4 |
export const increaseCounter = () => ({ type: actionTypes.INCREASE_COUNTER, payload: 1, }); |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import * as actionTypes from '../actions/actionTypes'; const counterReducer = (state = 0, action) => { // state yönetimi işleri! // apiye bağlanılmaz! let newState; switch (action.type) { case actionTypes.INCREASE_COUNTER: return (newState = state + action.payload); case actionTypes.DECREASE_COUNTER: return (newState = state - action.payload); case actionTypes.INCREASE_BY_TWO_COUNTER: return (newState = state + action.payload); default: return state; } }; export default counterReducer; |
gelen type ile switch yapımız karşılık verir.
reducer/index.js
|
1 2 3 4 5 6 7 |
import {combineReducers} from 'redux'; import counterReducer from './counterReducer'; const reducers = combineReducers({ counterReducer, }); export default reducers; |
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.
|
1 2 3 4 5 6 7 |
import {createStore} from 'redux'; import reducers from './index'; export default function configureStore() { return createStore(reducers); } |
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ı.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import {AppRegistry} from 'react-native'; import React from 'react'; import App from './App'; import {name as appName} from './app.json'; import configureStore from './src/redux/reducers/configureStore'; import {Provider} from 'react-redux'; const store = configureStore(); const RNRedux = () => ( <Provider store={store}> <App /> </Provider> ); AppRegistry.registerComponent(appName, () => RNRedux); |
Artık ayar kısımları bitti kullanıma hazır.
App.js dosyamız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React, {Component} from 'react'; import {View, Text, StyleSheet} from 'react-native'; import Counter from './src/components/Counter'; import IncreaseCounter from './src/components/IncreaseCounter'; import DecreaseCounter from './src/components/DecreaseCounter'; import IncreaseByTwoCounter from './src/components/IncreaseByTwoCounter'; export default class App extends Component { render() { return ( <View style={styles.container}> <Counter /> <IncreaseCounter /> <DecreaseCounter /> <IncreaseByTwoCounter /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); |
./src/components/Counter.js dosyamız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React, {Component} from 'react'; import {Text, View} from 'react-native'; import {connect} from 'react-redux'; class Counter extends Component { render() { return ( <View> <Text> {this.props.counter} </Text> </View> ); } } function mapStateToProps(state) { return {counter: state.counterReducer}; } export default connect(mapStateToProps)(Counter); |
Component oluştururken önemli nokta redux ile haberleşmesi bu işlem için componentlerin export işlemlerini biraz değiştiriyoruz.
-
Component ile redux bağlantı işlemini yapan import {connect} from ‘react-redux’; kütüphanemiz.
-
export default connect(mapStateToProps)(Counter); ile Counter componentimizi bağlama işlemi yapıyoruz.
-
mapStateToProps() fonksiyonu ise tam olarak şu şekilde görev yapar “state’leri bağla propslara”
-
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.
-
state.counterReducer şeklinde reducer’lara ulaşabilme sebebimizde index.js içinde
|
1 2 3 |
<Provider store={store}> <App /> </Provider> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React, {Component} from 'react'; import {Text, View, TouchableOpacity} from 'react-native'; import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; import {increaseCounter} from '../redux/actions/counterActions'; class IncreaseCounter extends Component { render() { return ( <View> <TouchableOpacity style={{backgroundColor: '#F0BD6E'}} onPress={() => { this.props.dispatch(increaseCounter()); }}> <Text style={{fontSize: 24}}> +1 </Text> </TouchableOpacity> </View> ); } } function mapDispatchToProps(dispatch) { return {action: bindActionCreators(increaseCounter, dispatch)}; } export default connect(mapDispatchToProps)(IncreaseCounter); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React, {Component} from 'react'; import {Text, View, TouchableOpacity} from 'react-native'; import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; import {decreaseCounter} from '../redux/actions/counterActions'; class DecreaseCounter extends Component { render() { return ( <View> <TouchableOpacity style={{backgroundColor: '#F0BD6E'}} onPress={() => { this.props.dispatch(decreaseCounter()); }}> <Text style={{fontSize: 24}}> -1 </Text> </TouchableOpacity> </View> ); } } function mapDispatchToProps(dispatch) { return {action: bindActionCreators(decreaseCounter, dispatch)}; } export default connect(mapDispatchToProps)(DecreaseCounter); |
./src/components/IncreaseByTwoCounter.js dosyamız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React, {Component} from 'react'; import {Text, View, TouchableOpacity} from 'react-native'; import {bindActionCreators} from 'redux'; import {connect} from 'react-redux'; import {increaseByTwoCounter} from '../redux/actions/counterActions'; class IncreaseByTwoCounter extends Component { render() { return ( <View> <TouchableOpacity style={{backgroundColor: '#F0BD6E'}} onPress={() => { this.props.dispatch(increaseByTwoCounter()); }}> <Text style={{fontSize: 24}}> +2 </Text> </TouchableOpacity> </View> ); } } function mapDispatchToProps(dispatch) { return {action: bindActionCreators(increaseByTwoCounter, dispatch)}; } export default connect(mapDispatchToProps)(IncreaseByTwoCounter); |
Aslında bu kadar basit.
Teşekkürler
Burada “0” değerimiz counterReducer.js dosyamızda yer alan const counterReducer = (state = 10 { 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:
state = 10 değilde 0 değilmiydi hocam ?
Hocam 3 gündür farklı farklı kaynaklardan konuyu anlamaya çalışıyordum, çok iyi anlatmışsınız, emeğiniz için teşekkürler. Eğitimlerinizin devamını bekleriz.