React Native Redux example

constants.js

export const COUNTER_CHANGE = 'COUNTER_CHANGE'

counts.js, Actions are JavaScript objects that represent payloads of information that send data from your application to your Redux store. Actions have a type and an optional payload. In our case, the type will be COUNTER_CHANGE, and the payload count which we are assigning into our count variable in store.

import { COUNTER_CHANGE } from '../constants';
export function changeCount(count) {
    return {
        type: COUNTER_CHANGE,
        payload: count
    }
}

countReducer.js, A reducer is a pure function that takes the previous state and an action as arguments and returns a new state. The reducer is instrumental in keeping the current state of count updated throughout our app as it changes.

import { COUNTER_CHANGE } from '../constants';
const initialState = {
    count: 0
};

const countReducer = (state = initialState, action) => {

    switch(action.type) {

        case COUNTER_CHANGE:
            return {
                ...state,
                count:action.payload
            };
        default:
            return state;
    }
}

export default countReducer;

configureStore.js, the combineReducer function combines all the different reducers into one and forms the global state, the store. So this is the global state of our whole application.

import { combineReducers, createStore } from 'redux';
import countReducer from '../reducers/countReducer';

const rootReducer = combineReducers({ count: countReducer });

const configureStore = () => {
    return createStore(rootReducer);
}
export default configureStore;

index.js, the app index. Pass the Provider as a root element and pass the store and then via react-redux’s connect() function, we can connect the any react component to redux store.

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

const store = configureStore();
const RNRedux = () => (
  
    
  
);

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

App.js, mapStateToProps will contain all the state properties which will be available to the components of the app whatever properties that need to be accessed from the UI components need to be written into the mapStateToProps helper function. mapDispatchToProps will contain all the necessary functions wrapped with action creators which will be mapped to the props of the app and can be called directly. The directory containing the file is ./actions/counts.js

import React, { Component } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as countActions from './actions/counts';

class App extends Component {
  decrementCount() {
    let { count, actions } = this.props;
    count--;
    actions.changeCount(count);
  }
  incrementCount() {
    let { count, actions } = this.props;
    count++;
    actions.changeCount(count);
  }
  render() {
    const { count } = this.props;
    return (
      
         this.incrementCount()}
        />
        {count}
         this.decrementCount()}
        />
      
    );
  }
};

const ActionCreators = Object.assign(
  {},
  countActions,
);

const mapStateToProps = state => ({
  count: state.count.count,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(ActionCreators, dispatch),
});

// connect App.js to the Redux store.
export default connect(mapStateToProps, mapDispatchToProps)(App)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingHorizontal: 10,
    paddingVertical: 20
  },
  textCenter:{
    textAlign :'center',
    margin: 10,
  }
});

Complete example in Github

Reference: https://enappd.com/blog/redux-in-react-native-app/92/