08.07. Uygulamanın Redux'a Bağlanması

Redux bölümünü uygulamaya bağlamak için hem ilk çalışan index.js hem de uygulamanın arayüzü olan App.js dosyalarında değişiklikler yapmalıyız. Bu bölüm bu değişiklikler hakkında bilgi vermektedir.

index.js ile başlayalım.

import {AppRegistry} from 'react-native';
import React from 'react';
import App from './App';
import {name as appName} from './app.json';
import { Provider } from 'react-redux';

import configureStore from './store';

const store = configureStore()

const RNRedux = () => (
  <Provider store = { store }>
    <App />
  </Provider>
)

AppRegistry.registerComponent(appName, () => RNRedux);

import {AppRegistry} from 'react-native';

import React from 'react';

import App from './App';

import {name as appName} from './app.json';

import { Provider } from 'react-redux';

import configureStore from './store';

const store = configureStore()

const RNRedux = () => (

<App />

</Provider>

)

AppRegistry.registerComponent(appName, () => RNRedux);

Kök eleman olarak Provider, store’dan geçen ve ardından react-redux’un connect() fonksiyonu ile bağlanır (benzer şekilde herhangi bir react bileşenini redux store’a bağlayabiliriz.)

Connect işlemi direkt App.js içinde yapılır.

import React, { Component } from 'react';
import { StyleSheet, View, TextInput, Button, FlatList } from 'react-native';
import ListItem from './components/ListItem';
import { connect } from 'react-redux';
import { ekleYer } from './actions/place';

class App extends Component {

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

  placeSubmitHandler = () => {
    if(this.state.placeName.trim() === '') {
      return;
    }
    this.props.add(this.state.placeName);
}

placeNameChangeHandler = (value) => {
  this.setState({
    placeName: value
  });    
}

placesOutput = () => {
   return (
    <FlatList style = { styles.listContainer }
      data = { this.props.places }
      keyExtractor={(item, index) => index.toString()}
      renderItem = { info => (
        <ListItem 
          placeName={ info.item.value }
        />
      )}
    />
  )
}

render() {
  return (
    <View style={ styles.container }>
      <View style = { styles.inputContainer }>
        <TextInput
          placeholder = "Yer"
          style = { styles.placeInput }
          value = { this.state.placeName }
          onChangeText = { this.placeNameChangeHandler }
        ></TextInput>
        <Button title = 'Add' 
          style = { styles.placeButton }
          onPress = { this.placeSubmitHandler }
        />
        </View>
        <View style = { styles.listContainer }>
          { this.placesOutput() }
        </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%'
  }
});

const mapStateToProps = state => {
  return {
    places: state.places.places
  }
}

const mapDispatchToProps = dispatch => {
  return {
    add: (name) => {
      dispatch(ekleYer(name))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

100

101

import React, { Component } from 'react';

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

import ListItem from './components/ListItem';

import { connect } from 'react-redux';

import { ekleYer } from './actions/place';

class App extends Component {

state = {

placeName: '',

places: []

}

placeSubmitHandler = () => {

if(this.state.placeName.trim() === '') {

return;

}

this.props.add(this.state.placeName);

}

placeNameChangeHandler = (value) => {

this.setState({

placeName: value

});

}

placesOutput = () => {

return (

<FlatList style = { styles.listContainer }

data = { this.props.places }

keyExtractor={(item, index) => index.toString()}

renderItem = { info => (

<ListItem

placeName={ info.item.value }

)}

)

}

render() {

return (

<TextInput

placeholder = "Yer"

style = { styles.placeInput }

value = { this.state.placeName }

onChangeText = { this.placeNameChangeHandler }

></TextInput>

<Button title = 'Add'

style = { styles.placeButton }

onPress = { this.placeSubmitHandler }

</View>

{ this.placesOutput() }

</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%'

}

});

const mapStateToProps = state => {

return {

places: state.places.places

}

const mapDispatchToProps = dispatch => {

return {

add: (name) => {

dispatch(ekleYer(name))

}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Bu örnekte, ekle Button’una tıkladığımızda, metin kutusu değerini alırız ve ardından bu değerin olduğu işleme göndeririz. Burada action, nesneyi action type ve payload olarak döndürür. Ardından, reducer type’a göre çalışır ve değerleri store içine depolar. Yeni bir ekleme işlemi sonunda places dizisi güncellenmelidir. Bunun için mapStateToProps fonksiyonu yaratılır. Tüm state güncellemeleri bu fonksiyon üzerinden yapılır. En son olarak bir yer eklendiğinde sonucu göstermek için bir bileşen tasarlayalım. App.js’te bu bileşen components klasörü içine yaratılan ListItem.js dosyası üzerinden yürütülür. Bu dosyaya aşağıdaki kodu ekleyelim.

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const ListItem = (props) => {
    return (
      <TouchableOpacity>
        <View style = { styles.listItem }>
          <Text>{ props.placeName }</Text>
        </View>
      </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
  listItem: {
    width: '100%',
    padding: 10,
    marginBottom: 10,
    backgroundColor: '#eee'
  }
});

export default ListItem;

import React from 'react';

import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const ListItem = (props) => {

return (

<Text>{ props.placeName }</Text>

</View>

</TouchableOpacity>

);

}

const styles = StyleSheet.create({

listItem: {

width: '100%',

padding: 10,

marginBottom: 10,

backgroundColor: '#eee'

}

});

export default ListItem;

Uygulamamız çalışmaya hazır. Emülatör veya simulatörünüzü güncelleyin, eğer kırmızı ekran yoksa kod çalışıyorsa problem yok. Tebrikler. Eğer kırmızı ekran var ise dikkatlice hatanın sebebini anlamaya çalışın.

Sonuç olarak, redux sayesinde state’leri tek bir store üzerinden kolayca yönetebiliyoruz. Redux, sadece React Native değil Javascript kullanılan birçok projede kullanılabileceğini unutmayın. Herkese bol kodlu günler 😉