Redux is a popular React and React Native state management library, meant to be used in complex React and React Native apps where sharing state between multi-level components can get extremely difficult to manage. In this article we are going to learn how to use Redux with React Hooks by building a real React Native app.

This is how the final app will look like

In this tutorial, let us take a look at some of the hooks provided by the react-reduxlibrary that provides a way to avoid writing boilerplate code when using the connect()High Order Component (if you’re not familiar with connect(), don’t worry, that doesn’t matter that much anymore).

1. Create a New React Native App

expo init projectname

After the project has been generated, please navigate inside the directory and install the following dependencies.

yarn add redux react-redux @react-navigation/native @react-navigation/stack

If you are using expo-cli, run the following command to install required dependencies for the navigator to work.

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

If you are using a project generated with react-native-cliit is recommended to follow the instructions from here to install the required dependencies and any other configuration with native OS platforms.

2. Create Two Mock Screens

Each of these screen files is going to have some random data to display until the stack navigator is set up.

Here is the code snippet for ListScreen.js:

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

function ListScreen() {
  return (
    <View style={styles.container}>
      <Text>List Screen</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default ListScreen

Here is the code snippet for ModalScreen.js:

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

function ModalScreen() {
  return (
    <View style={styles.container}>
      <Text>Modal Screen</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default ModalScreen

#react #programming #javascript #react-native #redux