With React Hooks growing in usage, the ability to handle a component’s state and side effects is now a common pattern in functional components. React Redux offers a set of Hook APIs as an alternative to the omnipresent connect() high order component.

In this tutorial, let’s continue building a simple React Native app where a user can save notes. In part 1, we used the Redux Hooks API to manage state. This post is in continuation of that previous post:

If you’re familiar with the basics of React Hooks and how to implement them with a basic navigation setup, you can skip the previous post and continue from this one.

You can find the complete code for this tutorial in this GitHub repo.

Table of Contents

Installing Redux

Adding action types and creators

Add a reducer

Configuring a Redux store

Accessing global state

Dispatching actions

Running the app

Conclusion

Installing redux

If you’ve cloned the repo from the previous example, make sure that the dependencies in the package.json file looks like below:

Next, install the following dependencies from a terminal window to integrate and use Redux to manage the state:

The directory structure that I’m going to follow to manage Redux-related files is going to be based on the pragmatic approach called ducks. Here’s the link to a great post on using the ducks pattern in Redux and React apps. This post can help you understand the pattern and why it might be needed.

What the ducks pattern allows you to have are modular reducers in the app itself. You don’t have to create different files for actions, types, and action creators. Instead, you can define them all in one modular file; however, if there is a need to create more than one reducer, you can define multiple reducer files.