The best way to setup Redux for a REST Api using React Hooks

In this article I will walk you through a generic setup of Redux for a Rest api using React Hooks.

For that, we will create multiple hooks in order to structure our project properly and improve readability. Our main hook, useRest will be using other generic hooks which are designed in the best way possible to serve our needs, useRestDispatcher, useExecutor and useRequestAgent.

Instead of adding boilerplate code for each api request and storing the data in redux, you will be able to do that with a few lines of code. At Exelerate, we are using Axios and Redux Toolkit, the most powerful packages when it comes to working with api calls and state management.

This article requires prior knowledge of the technologies mentioned above. If you are new to any of these, please read the official documentation first.

Initial setup

Let’s start with creating an app first

Since we will be using Typescript in the project, we will start by creating an app using the official Redux+TS template for Create React App. Let’s name it the-userest-hook.

npx create-react-app the-userest-hook --template redux-typescript

If you want to add Redux Toolkit to an existing app, just

yarn add @reduxjs/toolkit

If you are not using Redux Toolkit you can adapt the hook with your Redux setup i.e., use your actions because it is dependent only on reducer actions.

To learn how to create your generic redux actions and models, you can check this article.