How I integrated Redux into my React Native application

Step by step guide integrating Redux into your React Native application

Few months back I have started learning and developing React Native applications. At a certain point I understood the importance of Redux for better state management in my application.

There is a state management in react native application itself. But as the application grows it will be difficult to manage the state in different places. So Redux can be helpful at that stage.

What is Redux?

Redux is all about having central store to manage the application state. This means the entire data flow of the app is handle within a single container while persisting pervious state.

Redux has clearly defined way of managing and changing the data. The way to manipulate data is to dispatch an Action. Actions are like pre defined information packages, possibly containing a payload . Still these actions don’t manipulate the data in the central store and it handle via Reducers. Reducers receive the actions and manipulate the app state. In single application we can have multiple reducers and combine them into single root reducer. Finally when the central store updated, it trigger subscription and thats where you can close this circle. You can hook your components into these subscriptions and can get the updated state.


Here I’m building a simple counter application to demonstrate the usage of Redux.

Setup the application

First I’m creating a react native application using following command,

react-native init RNRedux

Usually when I create a react native application I move all my react native code into separate folder and manage them in following structure. There is no rule to use the same and you could use your own structure.

src
|_ assets
|_ components
|_ config
|_ screens

Then I’m going to install redux on my application. To install redux and other support libraries (react-redux) you could following commands,

npm install --save redux react-redux
or 
yarn add redux react-redux

Before doing anything further, I’m creating a new subfolder in my src folder to manage all my redux related code. In that one also I’m creating following file structure to manage it in a clean way.

src
|_store
|_actions
|_reducers

Developing

In actions subfolder I have created action_types.js file to define action types that we’re using. We can even define them in actions or reducers as a constants. But this is convenient, clean and effective for debugging. It’ll reduce the chance of mistyping. Since we’re creating a counter app to increase and decrease a number, we only need two action types.

Then I’m creating the action creators that we need. I have created counter_actions.js file for this purpose. To be a valid action we have to return at least the action type property. Also we can pass any other data we need, along with the type. For example in below code we pass the data which we got as a parameter,

export const functionName = (data) => {
return:{
type: ACTION_TYPE,
payload: data
}
}

Here is the actions that I have created for this counter demo application,

For our convenience I’m creating another file, index.js in actions folder to import all actions that we have created. This is not an essential step. But when we’re into large application development we’ll have many action creators. So objective for creating this file is to import all of them by single file import.

Then I’m creating the counter_reducer.js to define our reducer. It’s actually a function with a switch case. It will accept two parameters. First one is the old state and the second one is the action we got. Then inside the function we can find which action we got and manipulate the state according to that.

I will also add another constant which is the initialState as a JS object. It will manage the initial state when app begins.

In following reducer it will switch among action type and do the add or subtract accordingly and update the state. We need to use ...state, at the beginning to keep the other states / properties as the previous (but here we only have one state).

Note: We can access the data we passed through the previously mentioned action creators by action parameter here. (Eg. action.payload.data)

Here, as the next step I’m going to create the store. First we have to create a root reducer combining all reducers that we have. In this project we have only one reducer. But you can add more and combine them together with combineReducers function from redux. Later you can access then via the key you provided. The store that we create in this stage will use in next steps.

To work with redux, we have to aware our application about redux. To do so wrap application with react-redux Provider. And in this step we have to provide the redux store to the Provider. Then we can access redux store from our application. Below update made to the index.js file in the application root.

Now that we have provided the redux store to our application, we can now connect our components to it. As the final step we’re going to connect redux with our react native screens and components. To do so you’ll need connect method from the react-redux.

Below I have created a separate component for counter value for better understanding. There I export the component using connect function. To connect function, we pass two parameters and here I have declared them as const mapStateToProps and mapDispatchToProps.

They are both pure functions that are provided the state and dispatch respectively.

Consider following component and screen, which uses connect to map the state and dispatch to the props of a component.

In the component I have only mapped count state with component props. After that you can access the counter value via this.props.counterValue

In main_screen.js I have mapped action dispatches in to props. Then I can use those counterAddFunction and counterSubtractFunction to dispatch an action relatively.

Now you can run and try the application using react-native run-android or react-native run-ios commands.

Debugging

React Native Debugger (Link) is a great tool to debug react native applications. But to debug with redux, you have to config few more steps. Update the config_store.js file as follows for enable redux debugging. It will show you the current states in redux, actions dispatched etc.

This article is based on my experiences and various resources that I have used to learn React Native and Redux.

You can see the completed sample project on GitHub by following link,