Add redux to an existing react native app

First step for adding redux to our react native application is to install the missing modules. You can install them with npm: npm install redux react-redux redux-thunk , or using yarn: yarn add redux react-redux redux-thunk

install redux

A simple configuration for react native application using redux is showed in the image, is your option how you want to structure a react native application, but i will talk later in other article what best approaches i found working with react native.

I made a folder for actions, one folder for reducers and one folder for config. The config folder holds the store.js file and in this file we will have the root reducer. I added redux-thunk because we want to work with action creators, as we know there are two types: actions and action creators .

Actions are payloads of information that send data from our app to the store.

Action creators are functions that create actions.

Reducers specify how the application’s state changes in response to actions sent to the store.

In the reducer folder i added a index.js file, here we have the root reducer:

/*
 src/reducers/index.js
*/
import { combineReducers } from 'redux';
import demoReducer from './demo';

export default combineReducers({
 demoReducer: demoReducer
});

As you can see the index file holds the root of reducer. Why i called root ? Because we use combineReducers method, it’s a helper function from redux that combine all our reducers in a single file. Our next step is to create a demo action which triggers a change and update our store.

Our demo action is very simple, when type of action is ‘DEMO_ACTION’ update our store with data from payload.

/*
 src/actions/demo.js
*/

export const demoAction = () => dispatch => {
 dispatch({
  type: 'DEMO_ACTION',
  payload: 'result'
 })
}

The reducer has two states, one for ‘DEMO_ACTION’ updating our store with data from payload and the default state.

/*
  src/reducers/demo.js
*/
export default (state = {}, action) => {
 switch (action.type) {
  case 'DEMO_ACTION':
   return {
    result: action.payload
   }
  default:
   return state
 }
}

A final step is to connect our react-native application with redux through <Provider> component. Provider is a wrapper component from Redux, is fallowing HOC pattern and requires an important attribute: store

/**
 * @format
 * index.js
 */

import { AppRegistry } from 'react-native';
import React from 'react';

import { Provider } from 'react-redux';
import App from './App';
import store from './config/store';
import { name as appName } from './app.json';

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

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

To see how the update of store is working you need to connect the action created with a component. So let’s see how we trigger our action and update the redux store.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

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

import { connect } from 'react-redux';
import { demoAction } from './actions/demo';


type Props = {};
class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
      <Button
        onPress={() => this.props.demoAction()}
        title="Check our Redux"
        color="#841584"
        />
        <Text style={styles.welcome}>Welcome to react native!</Text>
      </View>
    );
  }
}

const mapStateToProps = state => ({
 demo: state.demoReducer
});

const mapDispatchToProps = dispatch => ({
 demoAction: () => dispatch(demoAction())
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

const styles = StyleSheet.create({});

Connect method from ‘react-redux’ has two parameters mapStateToProps and mapDispatchToProps, one is getting data from redux store and mapDispatchToProps is updating the store.

Sharing is caring!


Leave a Reply

Your email address will not be published. Required fields are marked *