State Management in React Native with Redux and Redux Thunk

The biggest challenge you will face when building a React Native application is managing state predictably across every component. With so many available NPM libraries that address the problem of state management, such as 

, architecting a robust state management solution has never been easier. However, if we don't fully understand how these technologies work, then we may end up littering the application state with too much state and triggering unnecessary re-renders from extra state changes. 

The key to state management is distinguishing between two types of state: component and application. Take any one component from your application, and for each state variable, ask yourself whether it belongs only within this component or if at least one other component depends on it. State isolated to a single component should be handled with the 

 hook or passed from a parent component via 

, whereas state shared by multiple components should be handled by React Context or a third-party library like Redux.

While you can manage state on the native side, the transmission of data across the React Native bridge and serialization/deserialization of data per operation is neither optimal nor worthwhile. You should just keep the application state on the JavaScript side.  

Proper state management accomplishes a few things for the codebase:

Despite the React Context API, the first-party, built-in, lightweight state management solution, you shouldn't immediately write off Redux for managing application state. You may reject Redux because of the additional boilerplate code it adds to your application, but Redux enforces a unidirectional flow of data and strict patterns for manipulating application state. In a team environment, Redux provides a superior developer experience with time-travel debugging tools (

) for finding bugs earlier in development and state snapshots for quickly reproducing bugs.

For React Native applications, Redux middleware lets us execute side-effects, such as Google Analytics event tracking and asynchronous API calls, without blocking state updates. Middleware extends Redux's capabilities, and they can be chained together to perform complex asynchronous logic and interactions. Writing middleware is easy with 

, which dispatches actions asynchronously by delaying the dispatch with thunks.

Typically, an action creator looks like this:

const addToCart = ({ productId, quantity }) => {
  return { type: 'ADD_TO_CART', payload: { productId, quantity } };
};

When called, the action creator returns an action object. The action can be dispatched synchronously to a Redux store's reducer like so: 

store.dispatch(addToCart({
  productId: 'aeab5b6f-4120-46da-9d2c-e1aae997fdce',
  quantity: 2
}));

, the action creator returns a function that performs the dispatch asynchronously.

For example, what if we needed to persist some data to a Redis cache prior to updating the Redux store? Sending a request to an API endpoint that caches data in a Redis instance is an asynchronous action. 

By wrapping code within a function to delay its immediate invocation, thunks elegantly runs asynchronous logic while still being able to interact with the store.

Best of all, we can dispatch thunk-based actions as if they were standard actions!

store.dispatch(persistAddToCart({
  productId: 'aeab5b6f-4120-46da-9d2c-e1aae997fdce',
  quantity: 2
}));

Below, I'm going to show you how to integrate Redux and Redux Thunk into a React Native application from scratch.

To get started, initialize a new React Native project using the 

$ npx react-native init <ProjectName> --template react-native-template-typescript

Within the root of the project directory, install the Redux (

) libraries and their type definitions from the npm registry by running these commands:

$ cd <ProjectName>
$ npm install --save redux react-redux redux-thunk
$ npm install --save-dev redux-logger @types/react-redux @types/redux-logger # Redux comes with its own type definitions, so you don't need to install @types/redux. 

 logs Redux actions and snapshots the state before and after the action is dispatched and handled by the reducer.

Structuring Components for a React Native and Redux Application

Anytime you introduce a new component that interacts with the Redux store, structure the component in the following way:

This approach loosely couples Redux with the component. Since the component receives the data and methods via its props, they can hypothetically come from anywhere. If you decide to remove Redux from your application or move the component to its own library (or to an application without Redux), then the component will still work properly as long as it receives the data and methods from a parent component. 

Let me show you how this works with an example. Suppose we add a 

 component that displays the current count stored in the Redux store and features two buttons for incrementing and decrementing the count by one. Nothing fancy.

Start by writing the store, reducers and action creators.

import {applyMiddleware, createStore} from 'redux';

import reducers from '../reducers';

let middlewares = [];

if (__DEV__) {
  const logger = require('redux-logger');

  const loggerMiddleware = logger.createLogger({
    duration: true,
  });

  middlewares = [...middlewares, loggerMiddleware];
}

const store = createStore(reducers, applyMiddleware(...middlewares));

export type AppDispatch = typeof store.dispatch;

export default store;

 is production-ready, the overhead of logging on each action may adversely affect performance based on the number of logs being printed, the size of each log statement, etc. We'll limit logging to development only. Hence, the store will only apply the 

 to log certain actions or collapse actions that didn't result in an error. Visit the 

Only a single set of reducers will be added to the store: the 

 reducer. It will modify the portion of the state tree that the 

import {combineReducers} from 'redux';

import counter from './counter';

export default combineReducers({
  counter,
});

 reducer will either increment or decrement the stored count by one. Make sure that all operations involving 

 inside the reducer are immutable for time-travel debugging. 

import {ACTION_TYPES} from '../constants';

const initialState = {
  count: 0,
};

export default (state = initialState, action: any) => {
  switch (action.type) {
    case ACTION_TYPES.DECREMENT:
      return {
        ...state,
        count: state.count - 1,
      };
    case ACTION_TYPES.INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
    default:
      return state;
  }
};

export const ACTION_TYPES = {
  DECREMENT: 'DECREMENT',
  INCREMENT: 'INCREMENT',
};

import {ACTION_TYPES} from '../constants';

export const decrement = () => ({
  type: ACTION_TYPES.DECREMENT,
});

export const increment = () => ({
  type: ACTION_TYPES.INCREMENT,
});

 component increments and decrements the value of 

 stored within the Redux store. Connect the component to the Redux store by calling Redux's 

 determines what part of the data from the store should be passed to the component. In this case, the 

 will be passed to the component as the prop 

 determines the actions the component can dispatch. In this case, the component should be able to dispatch the 

 action will be dispatched when the component calls the 

import {connect} from 'react-redux';

import Component from './Component';
import {increment, decrement} from '../../../shared/redux/actions';

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

const mapDispatchToProps = (dispatch: any) => ({
  onIncrement: () => dispatch(increment()),
  onDecrement: () => dispatch(decrement()),
});

const counterContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Component);

export default counterContainer;

 component, display the current count's value within a 

 functions to the "+ Increment" and "- Decrement" buttons' 

 respectively. Pressing on any of these buttons will either increment or decrement the count.

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

interface CounterProps {
  count: number;
  onDecrement: () => void;
  onIncrement: () => void;
}

const Counter: FC<CounterProps> = ({count, onDecrement, onIncrement}) => (
  <View style={styles.container}>
    <View style={styles.display}>
      <Text style={styles.countText}>{count}</Text>
    </View>
    <View style={styles.actions}>
      <Button onPress={onIncrement} title="+ Increment" />
      <Button onPress={onDecrement} title="- Decrement" />
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  display: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  countText: {
    fontWeight: '700',
    fontSize: 24,
  },
  actions: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
});

export default Counter;

 component to a different codebase that doesn't depend on Redux, and it would work perfectly fine as long as you provide the same set of props:

import React, { useState } from 'react';
import Counter from './Component.tsx';

const App = () => {
  const [ count, setCount ] = useState(0);

  const handleOnDecrement = () => {
    setCount(count - 1); 
  };

  const handleOnIncrement = () => {
    setCount(count + 1);
  };

  return (
    <Counter count={count} onDecrement={handleOnDecrement} onIncrement={handleOnIncrement} />
  )
}

export default App;

Finally, wrap the part of the application that interacts with the Redux store within a 

import React from 'react';
import {SafeAreaView, StatusBar, StyleSheet} from 'react-native';
import {Provider} from 'react-redux';

import store from './shared/redux/store';

import Counter from './src/components/counter';

const App = () => (
  <SafeAreaView style={styles.container}>
    <StatusBar barStyle="light-content" />
    <Provider store={store}>
      <Counter />
    </Provider>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Try it out in the iOS simulator by running the following command:

 middleware, much like middleware being executed on every incoming request in 

, gets executed on every dispatched action.

Redux Thunk serves as syntactic sugar for asynchronous actions. It eliminates the requirement of passing the 

 function to the action creator by having the action creator return an anonymous function that automatically provides the 

To support thunks, add Redux Thunk to the Redux store's middleware:

import {applyMiddleware, createStore} from 'redux';
import * as thunkMiddleware from 'redux-thunk';

import reducers from '../reducers';

let middlewares = [thunkMiddleware.default];

if (__DEV__) {
  const logger = require('redux-logger');

  const loggerMiddleware = logger.createLogger({
    duration: true,
  });

  middlewares = [...middlewares, loggerMiddleware];
}

const store = createStore(reducers, applyMiddleware(...middlewares));

export type AppDispatch = typeof store.dispatch;

export default store;

If we added a save button that sends a request to a remote API to store the current count inside of a database, then we would have to write the action creator for this functionality as a thunk.

For the purposes of this tutorial, we will simulate an API request via a 

 milliseconds have elapsed (approximately the average response time for an API endpoint), dispatch an action that switches an 

import {markAsSaved} from '../actions';
import {AppDispatch} from '../store';

export const save = () => (dispatch: AppDispatch) => {
  setTimeout(() => {
    dispatch(markAsSaved());
  }, 300);
};

import {ACTION_TYPES} from '../constants';

export const decrement = () => ({
  type: ACTION_TYPES.DECREMENT,
});

export const increment = () => ({
  type: ACTION_TYPES.INCREMENT,
});

export const markAsSaved = () => ({
  type: ACTION_TYPES.MARK_AS_SAVED,
});

export const ACTION_TYPES = {
  DECREMENT: 'DECREMENT',
  INCREMENT: 'INCREMENT',
  MARK_AS_SAVED: 'MARK_AS_SAVED',
};

import {ACTION_TYPES} from '../constants';

const initialState = {
  count: 0,
  isSaved: false,
};

export default (state = initialState, action: any) => {
  switch (action.type) {
    case ACTION_TYPES.DECREMENT:
      return {
        ...state,
        isSaved: false,
        count: state.count - 1,
      };
    case ACTION_TYPES.INCREMENT:
      return {
        ...state,
        isSaved: false,
        count: state.count + 1,
      };
    case ACTION_TYPES.MARK_AS_SAVED:
      return {
        ...state,
        isSaved: true,
      };
    default:
      return state;
  }
};

Whenever the user increments or decrements the current count, the 

 because the count has changed. This new value hasn't been saved yet.

 will follow the same syntax. The only exception is that 

 dispatches a thunk that dispatches a standard action after completing some asynchronous work.

import {connect} from 'react-redux';

import Component from './Component';
import {increment, decrement} from '../../../shared/redux/actions';
import {save} from '../../../shared/redux/thunk';

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

const mapDispatchToProps = (dispatch: any) => ({
  onIncrement: () => dispatch(increment()),
  onDecrement: () => dispatch(decrement()),
  onSave: () => dispatch(save()),
});

const counterContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Component);

export default counterContainer;

 component and display status text that shows "Saved!" whenever the user presses the save button.

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

interface CounterProps {
  count: number;
  isSaved: boolean;
  onDecrement: () => void;
  onIncrement: () => void;
  onSave: () => void;
}

const Counter: FC<CounterProps> = ({
  count,
  isSaved,
  onDecrement,
  onIncrement,
  onSave,
}) => (
  <View style={styles.container}>
    <View style={styles.display}>
      <Text style={styles.countText}>{count}</Text>
      {isSaved && <Text style={styles.savedText}>Saved!</Text>}
    </View>
    <View style={styles.actions}>
      <Button onPress={onIncrement} title="+ Increment" />
      <Button onPress={onDecrement} title="- Decrement" />
      <Button onPress={onSave} title="Save" />
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  display: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  countText: {
    fontWeight: '700',
    fontSize: 24,
  },
  actions: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  savedText: {
    fontSize: 12,
  },
});

export default Counter;

For a final version of this demo application, check out the source code at this 

Reload the application and try out the new save button!

 with TypeScript, Redux, Redux Thunk and React Native Navigation for a live, in-depth example on how to properly integrate Redux into a React Native project.

Next time, try adding Redux and Redux Thunk into your next React Native project!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

State Management in React Native with Redux and Redux Thunk

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript