React: Handling Errors with Axios Interceptor and Redux

Hi, my name is Ergün. This’s my first article please do not hesitate to make comments.

Introduction

In this article, I will explain how to control error messages from one place. You probably make API calls in your project. These calls are not always successful. In this scenario, you need to notify users. The notification has known as error messages. We must have a structure where the user can understand these error messages and say that this is an error wherever they see it. That’s why we should have a standard structure and apply it to every error call in our project.

We will use Axios and Redux to do that. But why we use these?

Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from browser. The reason we use Axios is that intercept requests and responses. This allows you can control every request/response call in one place.

Redux is a JavaScript framework for managing and maintaining application state. It helps state management between components.

We need to create the project and import dependencies. Let’s start :)

Prerequisites

To follow this article, you’ll need the following:

1. If you need to install nodejs/npm on your machine, please visit: https://nodejs.org/
2. I used yarn instead of npm in this project. Because yarn is a far more predictable and faster version of npm. You can click here and check more details.
3. After Node installation, npm installs automatically. So we can install yarn via npm.

npm install -g yarn

Create Project and Install Dependencies

We have to install all dependencies that we use.

Create React App:

yarn create react-app my-app

After creating the app, go to the project folder.

cd my-app

Install Redux :

yarn add redux react-redux

Install Axios :

yarn add axios

I also add semantic-ui for better looking.

yarn add semantic-ui-react semantic-ui-css

Project Structure

Project structure

Before start coding, I want to explain the project structure. The project has an environment, Redux components(reducer), warning modal to display HTTP error messages and services.

Code

Environment

Variables used throughout the project are defined here. Thus, spelling mistakes are prevented. I recommend putting your global variables in a file that you can call it wherever you need.

Warning Modal

Warning modal is the place we show errors. We have one state(open) and assign with Redux(mapStateToProps). Changes called props.variable(name, message) and assign state with useEffect hook.

Whenever showModal (line 33) changes, useEffect triggers. We setState into the useEffect. That’s why modal shows up or closes. After closing modal, the state dispatched with mapDispatchToProps function to the Redux store.

Interceptor

Interceptors allow us to do something before the request is sent and handle response immediately after API calls. After the error response(interceptor line: 15), we dispatch an object to open the error with a message.

App

App.js is the place that initializes variables and the Redux store. The interceptor initialized the 15th row with the Redux store.

We have two sections in the JSX. The first one is the success API call. The other one has a button that triggers the warning modal. When you clicked the button, it goes to the interceptor. You don’t need to do anything if the API call is an error. The warning modal is going to trigger automatically. That was our goal :)

You need to import Warning Modal here. Because it needs to be in a top-level JSX to show the modal.

Wrapping up

This method gives you handle error responses and saves lots of code for writing error response. You can control it in one place and works all over the project.

If you want to check the source code, please visit :

ErgunKezer/react-interceptor

Thanks for reading :)