The Beginner’s Guide to Understanding React Native Redux – Part 2

Welcome to second part of tutorial The Beginner’s Guide to Understanding React Native Redux. In this part of tutorial we will do a working Counter App. The pattern of redux that we will be using in the Counter app, the same pattern  we will implement in all consecutive react redux app we will will do.

First lets install two packages that we need for our redux app using the gollowing command :

npm install redux --save

npm install react-redux --save

now lets create our actions in index.js file in actions directory by adding the following code :

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

next create actiontypes in index.js file in actiontypes directory by adding the following code :

import { INCREMENT, DECREMENT } from '../actions'

export const INCREMENT_ACTION = {
    type: INCREMENT,
    text: 'Increase counter by one'
  }

export const DECREMENT_ACTION = {
      type: DECREMENT,
      text: 'Decrease counter by one'
  }

next create actioncreators in index.js file in actioncreators directory by adding the following code :

import { INCREMENT_ACTION, DECREMENT_ACTION } from '../actiontypes'

export const incrementAC = () => {
  return INCREMENT_ACTION
}

export const decrementAC = () => {
  return DECREMENT_ACTION
}

next create counter component in counter.js file in components directory by adding the following code :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { connect } from 'react-redux'


class Counter extends Component {
  render() {
    return (

        <Text style={styles.welcome}>
          { this.props.count }
        </Text>

    );
  }
}

const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

const mapStateToProps = state => ({
  count: state
})

export default connect(
  mapStateToProps
)(Counter)

At the end of code you will notice that we have used a mapStateToProps function which is passed as a parameter to the connect function. Connect function is provided by redux to facilitate connection between component and global state. So using mapStateToProps function we are actually converting global states to local props for Counter component.

next create counterbutton component in counterbutton.js file in components directory by adding the following code :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';
import { connect } from 'react-redux'
import { incrementAC, decrementAC } from '../actioncreators'

class CounterButton extends Component {
  render() {
    return (
      <View style={{margin : 20}} >
      <Button
        onPress={() => this.props.onClickInc() }
        title="Increase"
        color="#841584"
      />
      <View style={{margin : 20}} />
      <Button
        onPress={() => this.props.onClickDec() }
        title="Decrease"
        color="#841584"
      />
     </View>
    );
  }
}

const mapStateToProps = state => ({
  count: state
})

const mapdispatchtoprops = dispatch => ({
  onClickInc: () => {
   dispatch(incrementAC())
},
  onClickDec: () => {
   dispatch(decrementAC())
  }
})
export default connect(
  mapStateToProps,
  mapdispatchtoprops
)(CounterButton)

In the above code we have added a new mapdispatchtoprops method. Similar to  mapStateToProps, mapdispatchtoprops is converting global actions to local component props.

next create App.js and add the following code :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Count from './components/counter'
import CountButton from './components/counterbutton'
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Count />
        <CountButton />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

App.js is nothing but the component where we are rendering counter and counter button component.

Finally add the following code to index.ios.js/ index.android.js

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './app/App';
import counter from './app/reducers'
const store = createStore(counter);

export default class ReactReduxApp extends Component {
  render() {
    return (
      <Provider store={store}>
       <App/>
     </Provider>
    );
  }
}

AppRegistry.registerComponent('ReactReduxApp', () => ReactReduxApp);

To use redux, we wrapp the main component in a Provider component and inject store to Provider component, so that, global state, dispatch and connect are available in all the redux app components.

Conclusion

Going through the above tutorial you must have noticed there is not connection between conter component and counter button component in App.js, but still, when we tap the Increment or Decrement button, the value of counter changes. So, change in state of one component by performing event in another component is possible by using the redux system in our app.

We will be sending the source code to all the viewers who have/ will subscribed to our news letter.

Demo

View post on imgur.com