08.03. Redux Kurulumu ve Başlangıç Ayarları

Bu bölümde Redux’u bir örnek üzerinden anlatacağız. Redux: action, reducer ve store olmak üzere üç temel işlemden oluşur.

Bu üç işlemin ilişkisi aşağıdaki gibidir.

Bu bölümde basit bir örnek üzerinden bu işlemleri tanıtacağız. Öncelikle bir React Native projesi oluşturalım.

react-native init reduxExample
cd reduxExample
react-native run-android

react-native init reduxExample

cd reduxExample

react-native run-android

Uygulama emulatör veya simulatörünüze yüklendiyse devam edebilirsiniz. Ardından redux ve react-redux kütüphanelerini aşağıdaki komutlarla yükleyelim.

yarn add redux react-redux

# veya

npm install redux react-redux --save

yarn add redux react-redux

# veya

npm install redux react-redux --save

Kod yazmak için ortamımız hazır. App.js aşağıdaki gibi düzenleyelim. (Bir TextInput ve Yanına Bir Button)

import React, {Component} from 'react';
import { StyleSheet, View, TextInput, Button } from 'react-native';

export default class App extends Component {

state = {
  placeName: '',
  places: []
}

placeSubmitHandler = () => {
    console.log("İşlem Tamam");	
}

render() {
   return (
    <View style={ styles.container }>
       <View style = { styles.inputContainer }>
        <TextInput placeholder = "Yer ara" style = { styles.placeInput } />
        <Button title = 'Ekle' style = { styles.placeButton } onPress = { this.placeSubmitHandler }/>
        </View>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30, justifyContent: 'flex-start', alignItems: 'center',
  },
  inputContainer: {
    flexDirection: 'row',  justifyContent: 'space-between',
    alignItems: 'center',  width: '100%'
  },
  placeInput: {
    width: '70%'
  },
  placeButton: {
    width: '30%'
  },
  listContainer: {
    width: '100%'
  }
});

import React, {Component} from 'react';

import { StyleSheet, View, TextInput, Button } from 'react-native';

export default class App extends Component {

state = {

placeName: '',

places: []

}

placeSubmitHandler = () => {

console.log("İşlem Tamam");

}

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

container: {

paddingTop: 30, justifyContent: 'flex-start', alignItems: 'center',

inputContainer: {

flexDirection: 'row', justifyContent: 'space-between',

alignItems: 'center', width: '100%'

placeInput: {

width: '70%'

placeButton: {

width: '30%'

listContainer: {

width: '100%'

}

});

Şimdi bu dosya üzerinde düzenleme yapacağız. Bu dosya içindeki state yer ismi (placeName) ve yerler (places) değişkenlerine sahip olsun. Hadi başlayalım…