Using Redux in a React Native App

Redux is a library for state management that ensures that the application logic is well-organized and that apps work as expected. Redux makes it easy to understand your application's code regarding when, where, why, and how the state of the application is updated.

Redux is made up of the following key parts:

actions
reducers
store
dispatch
selector

In this post, we'll look at each part of the Redux architecture in turn.

Actions and Action Creators

An action is a plain JavaScript object that has a type field and an optional payload. It can also be thought of as an event that describes something that has happened.

1	const addTaskAction = {
2	type: 'task/taskAdded'
3	,payload: 'Laundry'
4	}

Action creators are just functions that create and return action objects.

const addTask = text => {
  return {
    type: 'task/taskAdded'',
    payload: text
  }
}

Reducers

A reducer is also a function that receives the current state and an action object, updates the state if necessary, and returns the new state. A reducer is not allowed to modify the existing state; instead, it copies the existing state and changes the copied values. In other words, the reducer should be a pure function.

Here is an example.

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === 'counter/increment') {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1
    }
  }
  // otherwise return the existing state unchanged
  return state
}

Store

A store is an object that stores the current state of a Redux application. You create the initial state of the store by passing a reducer to the configureStore functIon.

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())

To get the current state of a store, use the getState() function as above.

Dispatch and Selectors

dispatch() is a Redux store method and is used to update the state by passing an action object. Here, we create a task/taskAdded action with the addTask() action creator, and then pass it to the dispatch() method.

1	store.dispatch(addTask('pick up laundry'))

Selectors are used for reading data from a store.

Tutorial on Using Redux With React Native

In this React Native Redux tutorial, you will develop an app that allows a user to choose from a given set of subjects. The app will contain two screens, and you will also learn how to navigate between them using react-navigation.

Create a New React App

Create a new project using the Expo CLI tool.

1	expo init ReduxApp

Currently, you have a single component, App.js displaying a welcome message.

Create two new components in Home.js and Subjects.js. The home component will be the first screen a user sees, and the subjects component will display all the subjects in our app. Copy the code from App.js and add it to Home.js and Subjects.js.

Modify Home.js and Subjects.js to use Home and Subjects instead of the App class.

//Home.js 

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

class Home extends React.Component {
  render() {
    //...
  }
}

// ...
export default Home;

Subects.js should look similar.

Navigating Between Screens

Currently, there is no way to navigate between the two screens. The stack navigator allows your app to transition between screens where each new screen is placed on top of a stack.

First, install @react-navigation/native and its dependencies.

1	npm install @react-navigation/native

For an Expo-managed project, install the following.

1	expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Go to App.js and import react-native-gesture-handler at the top. You also need to add NavigationContainer and createStackNavigator to App.js. Then, to add navigation capabilities, wrap the components inside the App class in a NavigationContainer component.

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

// ...

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Home}
          />
          <Stack.Screen
            name="Subjects"
            component={Subjects}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// ...

Now the navigator is aware of your screens, and you can provide links for transitioning between screens.

Redux in a React Native App

As we mentioned earlier, Redux is a state management tool, and you will use it to manage all the states of the application. Our application is a subject selector where the user chooses the subjects from a predefined list.

First, install the Redux packages.

1	npm install redux react-redux

A Redux app follows the following conditions:

The state completely describes the condition of the app at any point in time.
The UI is rendered based on the state of the app.

For example, when a user clicks a button, the state is updated, and the UI renders the change based on the state.

Create a Reducer

The reducer will be responsible for keeping the state of the subjects at every point in time.

Create the file SubjectsReducer.js at the root level and add the following code.

import { combineReducers } from 'redux';

const INITIAL_STATE = {
  current: [],
  all_subjects: [
    'Literature',
    'Speech',
    'Writing',
    'Algebra',
    'Geometry',
    'Statistics',
    'Chemisrty',
    'Biology',
    'Physics',
    'Economics',
    'Geography',
    'History',
  ],
};

const subjectsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    default:
      return state
  }
};

export default combineReducers({
  subjects: subjectsReducer
});

In this file, you create an INITIAL_STATE variable with all the curriculum subjects and export the subjects reducer as a property called subjects. So far, the subjects reducer doesn't respond to any actions—the state can't change.

Create an Action

An action has a type and an optional payload. In this case, the type will be SELECT_SUBJECT, and the payload will be the array index of the subjects to be selected.

Create the SubjectsActions.js file at the root level and add the following code.

export const addSubject = subjectsIndex => (
  {
    type: 'SELECT_SUBJECT',
    payload: subjectsIndex,
  }
);

Now, we'll update the reducer to respond to this action.

// ...

const subjectsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'SELECT_SUBJECT':
     
      // copy the state 
      const { current,  all_subjects,} = state;

      //remove a subject from the all_subjects array
      
      const addedSubject = all_subjects.splice(action.payload, 1);

      // put subject in current array
      current.push(addedSubject);

      // update the redux state to reflect the change
      const newState = { current, all_subjects };
      
      //return new state
      return newState;

    default:
      return state
  }
};

// ...

Add the Reducer to the App

Now, open App.js and create a new store for the app using the createStore() function. We also make that store available to the components in our app by wrapping them in the <Provider> component. This will ensure that the store's state can be accessed by all of the child components.

import 'react-native-gesture-handler';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import subjectsReducer from './SubjectsReducer';
import Home from './Home';
import Subjects from './Subjects';

// ... . rest of the code

const store = createStore(subjectsReducer);

class App extends React.Component {
  // ...

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          //.. rest of the code
        </NavigationContainer>
      </Provider>
    )
  }
}

Add Redux to the Components

Now let's see how to make state data available to components with the connect() function. To use connect(), we need to create a mapStateToProps function, which will map the state from the store to the props in the two components.

Open Home.js, map the state, and render the values for the current subjects (which will be found in this.props.subjects.current). Also, add a button to navigate to the Subjects component.

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

class Home extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have { this.props.all_subjects.current.length } subjects.</Text>
        <Button
          title="Select more subjects"
          onPress={() =>
            this.props.navigation.navigate('Subjects')
          }
        />
      </View>
    );
  }
}


const mapStateToProps = (state) => {
  const { subjects } = state
  return { subjects }
};

export default connect(mapStateToProps)(Home);

Similarly, we'll use connect in the Subjects.js file to map the state to the component properties.

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

class Subjects extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>My Subjects!</Text>
        />
      </View>
    );
  }
}

//...

const mapStateToProps = (state) => {
  const { subjects } = state
  return { subjects }
};

export default connect(mapStateToProps)(Subjects);

We'll also add the code to display all the subjects in the Subjects component and a button to navigate to the Home screen. You will also add a button that will add the addSubject action to Subject.js. Here's what the final render() method in Subject.js should look like:

class Subject extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Select Subjects Below!</Text>

        {
          this.props.subjects.all_subjects.map((subject, index) => (
            <Button
              key={ subject }
              title={ `Add ${ subject }` }
              onPress={() =>
                this.props.addSubject(index)
              }
            />
          ))
        }

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

The final app should look like this.

Conclusion

Redux is a valuable tool, but it's only useful when used in the right way. Some of the situations where Redux might be helpful include code that is being worked on by many people or applications that contain large amounts of application state.

In this tutorial, you learned how to set up a React Native app using Redux.

The Best React Native App Templates on CodeCanyon

CodeCanyon is a digital marketplace that offers the best collection of React Native themes and templates. With a React Native app template, you can get started building your apps in the fastest time possible.

If you have trouble deciding which React Native template on CodeCanyon is right for you, this article should help:

16 Best React Native App Templates of 2023 (+3 Free)

Franc Lucas

15 Jun 2022