Handling errors while sending HTTP requests towards our server is always a must. This is exactly what we are going to do in this blog post. If the server returns an error with the 404 or 500 status codes, we are going to redirect a user to a specific page. Handling errors which have status codes other than 404 or 500 are going to be executed by using the modal form components. We already have the page for the Not Found (404) error, so let’s continue with the creation of the Internal Server Error (500) component.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction to the .NET Core series.

For the complete navigation and all the basic instructions of the React series, check out: Introduction to the React series.

For the previous part check out: Lazy Loading and HOC Component

The source code is available at GitHub: React series – react-series-part5-end branch

This post is divided into several sections:

Creating the 500 (Internal Server Error) Component

Let’s create a new InternalServer folder inside the ErrorPages folder, and in there let’s create two new files and name them InternalServer.js and InternalServer.css:

Internal server error structure - React Error Handling

We are going to modify the InternalServer.js file:

Then, let’s modify the InternalServer.css file:

Finally, let’s modify the App.js file:

Excellent.

The Internal Server Error (500) component is ready and we may continue on.

Implementing Redux for Error Handling

As we did with the repository part of this application, we are going to create another redux instance to handle errors in a single place in our app. We are familiar with the redux flow so this part is going to be quite easy to implement. One additional thing is that after creating a new reducer file, we are going to have two reducer files and therefore, we need to make different registration process inside the Index.js file.

We can handle errors in a few different ways, and here we are going to do it by using multiple reducers in a project. Moreover, centralizing the error handling actions is a good practice overall.

Let’s continue by modifying the ActionTypes.js file by adding three additional action types:

Inside the actions folder, we have the repositoryActions.js file. Now, inside the same folder, we need to add one more action file errorHandlerActions.js.  So, let’s modify that file:

In the code above, we export the action handleHTTPError in which we check the error status code and execute the corresponding function. This is the same thing we did with the repositoryActions.js file.

Inside the repositoryActions.js file, we need to import this errorHandlerActions.js file:

And to replace all the comments in the catch block of every function:

Let’s continue by creating a new reducer file errorHandlerReducer.js inside the reducers folder.

Right now we have this folder structure:

reducers folder structure - React Error Handling

The errorHandlerReducer.js file should look like this:

This logic is familiar as well. We create the state (initialState) object and then the function reducer which accepts the state and the action parameters. The reducer function is going to update the state based on typeproperty sent from the errorHandlerActions file.

Combine Reducers Registration

To finish the Redux setup let’s modify the Index.js file to register this reducer as well:

That’s it. We import errorHandlerReducer file and the combineReducers function. Then with a help of the combineReducers function, we create the rootReducers object which contains all of our reducers. Finally, we just pass this object to the store creation.

OwnerList Component Modification

We have to do one additional thing. In the OwnerList component, we need to change the way to set up the data property from the repositoryReducer file. Let’s modify the mapStateToProps function:

We must do this because we don’t have just one reducer file anymore. Both of our reducer files are registered inside one root object and therefore, we must specify which reducer we want to use.

Excellent.

We can try our error handling by modifying the code in the server’s method GetAllOwners. As the first line of a code, we can add return NotFound() or return StatusCode(500, “Some message”), and we are going to be redirected to the right error page for sure.

Implementation of the OwnerDetails Component

In this component, we are going to show individual owner with all of its accounts. If you are thinking: “Well, we could split this up into two components”, you are totally right.

We are going to do exactly that.

The parent component is going to be the OwnerDetails component and the child component is going to be the OwnersAccounts component. So, let’s start by creating a child component first.

For the OwnersAccounts component, we are going to create this structure:

Owner accounts folder structure - React Error Handling

Let’s modify the OwnersAccounts.js file:

We are doing great.

Let’s continue by creating a folder structure for the OwnerDetails component:

Owner details

Then, we are going to import all the necessary files inside the OwnerDetails component:

After that, let’s add the component implementation:

In the code above, we are using the this.props.data statement but we haven’t implemented a reducer yet. We are going to do that in a minute. Notice the renderTypeOfUserConditionally function call. In this function, we render the owner’s data conditionally and return the JSX code to display.  We are going to implement that function in a minute as well. Bellow the owner’s data we are displaying all the accounts related to the owner.

Conditional Rendering

To implement renderTypeOfUserConditionally, we need to add the following code above the render function but still inside a class:

Redux Connection

Finally, let’s connect this component to the reducer file to fetch the owner’s data below the closing tag of the render function:

And above the renderTypeOfUserConditionally function add this lifecycle hook:

We fetch the id from the url by calling the match.params.id statement from the props object. Then, we just create our url and call the onGetData property to fetch data from the server.

Finally, we can inspect the result for the Beginner user:

Begginer user

Additionally, let’s inspect the result for the Advanced user:

Advanced user

Great job.

We may inspect these results and be sure that all is working as expected.

Conclusion

Right now, we are pretty sure that the Redux implementation is a piece of cake for you. As we’ve stated in the previous articles, after some practice, you’ll be able to implement the Redux flow easily by using its own implementation pattern. We have used it to send HTTP requests and to handle HTTP errors, and now it is up to you to practice its implementation on whatever task you want.

By reading this post, you’ve learned:

  • To centralize the error handling logic by using the Redux workflow
  • How to combine reducers into a single object
  • To fetch the data for the details view and how to create that view

Thank you for reading the article and I hope you found something useful in it.

In the next part of the series, we are going to learn how to use dynamic inputs to create forms. Moreover, we are going to introduce modal components and create a component for the POST actions.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Web Development content we encourage you to subscribe to our blog.