What is Redux? How to use Redux in React Native? With Example

How to handle state using Redux in React Native?

Hello, React Developers..!!

As a beginner in React Native. When you start doing projects you always encounter one concept that is React-Redux. It’s not easy to handle this new concept in the project, as a beginner. After few attempts, this concept looks like a mess to you. But that’s not true. Let’s look at the React-Redux topic. We will also see how to use this concept in React Native projects with an example. Grab your seat and take a cup of coffee and let’s begin the hack.

Photo by Fotis Fotopoulos on Unsplash

What is Redux?

Redux is an open-source javascript library for managing application states. It is most commonly used with React and Angular.

In mobile app development, we deal with different states. But ever wonder how to manage these states in our application. If we have to manage the local component state then we go with the “useState” hook. But in the application, how do we manage a global state across different components? Here the concept of Redux comes into play. In the React Native Expo App, you can use the “useReducer” hook, as it has many Redux functions. With the help of this, you can manage the global state in the application. Let’s see how it works.

Example of Redux in React Native

Understanding the theory parts that how the Redux works is different, but doing a project on it will give you more clarity. So, let’s see a simple project and the use of Redux in it.

Start a react native project let say ReduxTutorial using the command: expo init ReduxTutorial. Select the blank template and continue the downloading of javascript libraries. After the installation, Open the App.js

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

App.js

const initialState = {
  count: 0
}
function reducer(state, action){
  switch(action.type){
    case "increment":
      return {count : state.count + 1}
    case "decrement":
      return {count : state.count - 1}
    case "reset":
      return initialState
    default:
      return initialState
  }
}

Here we implement a reducer function to implement increment, decrement and reset the count. We set the initial state count as 0. We separate each case and each case returns a different output. The reducer will take some state and based on the action type, figure out what to do with our state. For example, if the type is “increment” it will take the existing count in state and increment the value by one and return the incremented value. And this incremented value will be the new state. Reducers always return to a new state which replaces the old state.

App.js

import React, { useReducer } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState)
return (
    <View style={styles.container}>
      <View><Text>Count: {state.count}</Text></View>
      <Button onPress={() => dispatch({type: 'increment'})} title="Increment" />
      <Button success onPress={() => dispatch({type: 'decrement'})} title="Decrement" />
      <Button warning onPress={() => dispatch({type: 'reset'})} title="Reset" />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

First, we feed the reducer and initialState to the useReducer. useReducer then returns the current state, which we assign to state. We use dispatch to dispatch increment, decrement, and reset options.

The whole App.js will look like this.

import React, { useReducer } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
const initialState = {
  count: 0
}
export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState)
return (
    <View style={styles.container}>
      <View><Text>Count: {state.count}</Text></View>
      <Button onPress={() => dispatch({type: 'increment'})} title="Increment" />
      <Button success onPress={() => dispatch({type: 'decrement'})} title="Decrement" />
      <Button warning onPress={() => dispatch({type: 'reset'})} title="Reset" />
    </View>
  );
}
function reducer(state, action){
  switch(action.type){
    case "increment":
      return {count : state.count + 1}
    case "decrement":
      return {count : state.count - 1}
    case "reset":
      return initialState
    default:
      return initialState
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The rest is the UI part and a little bit of styling. Run this react native in the terminal or command prompt window using the command: npm start

You will see something like this on your mobile screen.

For any queries, let me know in the comment section.

Thank you.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)