📱React Native — Handling state management with React Redux 📝

Over a scaling development process, it’s a common problem that your React Native application will become more and more complex. Making it difficult to keep track of data being redundantly passed from component to component. Inevitably, you will run into issues that will quickly turn into a scavenger hunt for data and have you pulling out hair in minutes….. So how do we keep this from happening?

The answer is… React Redux.

In this article we’ll learn all about state management for your React Native applications utilizing the power of React Redux. So lets get started…

The first question that comes to mind is “what is state management?”

State management

State, is a built-in React object that is used to store data about our components. A components’ state will change over time; whenever the state of that component changes it will cause a re-render. These changes can be triggered by user actions, or system-generated events ( setState ) that will determine how our component will be rendered.

Think of the user interface as a result of our state. This means that we can change the appearance of our components depending on the data that is stored by our state. Lets refer to a simple counter example:

Lets say we have a state variable called counter that holds a number defaulting to 0 that will go up or down depending on our user’s click of two buttons + or -

When either button is pressed on, the state to our counter will change by adding or subtracting 1 to our current value. The results can then be displayed by using the counter value on our front-end.

State management is simply the management of the state of multiple components. As our applications scale up, it will become more and more difficult to keep track of all this madness.

To make this process easier, developers use state management libraries to create a model of their app state. This will make it simpler to update the state of our components, monitor these changes to our state, and read state values from any part of our application.

There is a number of popular state management tools out there, but today we will be focusing on React Redux.

What is React Redux ?

Redux, is a predictable state container that holds the value of different variables in our application all in a single place. With the entire state of our application centralized in one location, each of our components will have direct access to this state. Without Redux, data would be dependent on the our components and would need to be passed from component to component until it reaches its correct destination.

Redux Lifecycle

Redux introduces actions, action creators, reducers, and a store. These are the tools that we will use to create our state management architecture for our React Native Applications.

Action

The actions are our static information that will initiate a state change. Whenever you want your state with Redux, it will always begin with an action

Action creators

Functions that create and return action objects. This object is sent to our reducers in the application to be handled next.

Reducer

A pure function that handles changes to its state by returning a new state. It will take the previous value of the state and action function as parameters, and as a result return a new application state.

Store

The store is responsible for storing, reading, and updating our state. Our state is stores as objects, and whenever the store is updated it will also update the React components subscribed to it.

Getting started with Redux and React Native

Now that we’ve familiarized ourselves with Redux and its lifecycle. We will now finally get our hands dirty and implement our state management in a React Native Application.

Automatic set-up

This guide assumes you’ve already done a basic set up for your application. If that’s not the case, make sure you check out our React Native template. This template will provide you with a new react native project set-up and everything needed to get started with @reduxjs/toolkit which will help us implement our Redux store to our project. Plus, we’ve included libraries to deal with navigation, a few screens for you easily get started, and Native Wind integrations to make styling a lot easier.

If you decide to use our React Native template. You won’t have to worry about any set up for Redux. The store, our slices… everything will be set up from the get-go, ready for you to play with! The choice is yours

2 Brothers React Native Template

In your terminal run:
remember to replace “$YourAppName” with the name of your project

npx react-native init $YourAppName --template https://github.com/daboigbae/react-native-template

Take the following steps to run the application locally
We will be using iOS for this tutorial

iOS

1. run yarn install
2. navigate to the iOS folder and run pod install
3. run yarn ios at root

Android

1. run yarn install
2. run yarn android

Manual set-up

React Native Project Setup
Native Wind + Tailwind CSS Setup
React Navigation
React Redux Toolkit

Why Redux toolkit ?

If you skipped on using the React Native Template, Before we start writing any code. We will need to add @reduxjs/toolkit to our project. This will assist in integrating redux to our React Native project. According to the creator of @reduxjs/toolkit this was originally created to help address three common concerns about Redux:

• “configuring a Redux store is too complicated”
• “I have to add a lot of packages to get Redux to do anything useful”
• “Redux required too much boilerplate code”

So in conclusion we will be using this handy package to help us integrate Redux to our project in an easier manner.

In the root of our project run:

Using npm:

npm install @reduxjs/toolkit

Using yarn:

yarn add @reduxjs/toolkit

Time to write some code

First thing we’ll do is set up 2 components to set and display our Redux store data. We will be utilizing our tailwind powered component library; Munchkin to help us build out these components.

<UserInformationDisplay />

This component will be used to display our user information when it is finally dispatched to our store.

<UserForm />

This component will be used to set and dispatch our user information to our store.

So finally our HomeScreen should be looking something like this:

So far this is what our app should be looking like:

 

Setting up our reducer and UserSlice

As we mentioned above a reducer is a pure function that handles changes to its state by returning a new state. So our reducer in this case will be handling and storing our user Information to our store.

A slice is a collection of redux reducer logic and actions for a single feature in your app. The name comes from splitting up the root Redux state object into multiple “slices” of state

So we will be changing our UserSlice in our project to store our user information state defaulting to an empty object until data is dispatched to update it.

Next, we will update our UserForm component to use the built-in react-redux dispatch function to dispatch our user information to our Redux store.

Basic validation on the form so that user can’t submit a blank form

Finally we’ll updating our UserInformationDisplay component to utilize another built-in react-redux function useSelector() to retrieve our stored user information. We will also be initializing a useMemo() variable to help us conditionally render a message when user information has not been set.

Here are the results:

And there we have it! We have successfully used React Redux to handle state management in our React Native Application.

Optionally we can whitelist our UserSlice in our persistConfig on our store in order to persist our data even when our application is closed or killed. Meaning it wont be cleared until app cache is cleared or application is uninstalled.

Closing thoughts

So in closing, today we learned all about the React Redux lifecycle, and how to implement Redux for handling state management in a React Native application.

If you are looking for mobile developers for your next mobile app book a meeting on our website to get 10% off.