In the previous post, we have set up the Redux environment completely and created the Axios instance to send HTTP requests. As a continuation, in this post, we are going to register our Redux repository inside a component and to use it to fetch data from the server. Furthermore, we are going to load our component lazily to demonstrate the advantage of the lazy content loading.

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: HTTP, Axios, Redux

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

This post is divided into several sections:

OwnerList Component Creation, HOC, and Routes

Let’s create the following folder structure and the OwnerList.js file inside the containers folder:

ownerlist structure - React Lazy Loading

Prior to modifying our OwnerList component, let’s create one higher order component (HOC). We are going to use it as a helper to wrap our content inside the return() block in a component. As you already know (from the previous posts) the return() block requires one root tag and all the content inside it. If we don’t want to use a div or a p tag that can mess up our stylings, we can create this auxiliary component. It is going to create a wrapper that returns all the children content inside it without messing up the stylings of a project.

So, inside the src folder let’s create a new folder and name it hoc. In that folder, we are going to create a new one and name it Auxiliary. Finally, let’s create a new file Auxiliary.js:

auxiliary structure - React Lazy Loading

Now, we need to modify the Auxiliary.js file:

All we are doing here is just returning the children content which is going to be placed between open and close auxiliary tag.

Now, we can modify the OwnerList.js file:

OwnerList Component Explanation

The logic behind this is pretty straightforward.

We are creating an empty arrayowners which is going to hold all the owners of the database. Above the table, there is a link to the Create Component. We are using the Link component of the react-router-dom library. Then we need to create a table which will display all the data from the array, even though currently, it is just an empty array.

Let’s continue by modifying the App.js file to add a route to this component:

If we start our application with the npm start command, as a result, we will be able to navigate to the OwnerList component by clicking the Owner Actions menu:

OwnerActions menu - React Lazy Load

Implementing Redux

Since we currently don’t have any data let’s add some.

First, we have to connect our component to our reducer. The reducer is going to set up the state and pass the data to this component as a property inside the props object.

To do that, let’s import connect from the react-redux library and all the actions from the repositoryAction.js file:

Then below the closing bracket of our component and right above the export statement, we are going to add the following functions and then to modify that export statement:

The mapStateToProps function is mapping the data property from the repositoryReducer’s initialState object to the data property inside the OwnerList component. To access this data property, we just need to call it like this: this.props.data.

The mapDispatchToProps function is creating additional property onGetData. We may call it with the: this.props.onGetData statement. Then, it is going to dispatch the action inside the repositoryActions.js file which is going to fetch the data from the server.

Redux Roundup

Right now if we look at the diagram from the previous post, everything makes perfect sense. From this component, we call the action inside the repositoryActions.js file. This action fetches the data from the server and triggers the reducer. Our reducer updates the state by modifying the data property inside the initialState object. Finally, the Central Store maps that data property to this component with the mapStateToProps function.

Creating the Owner Component

Since we want to display multiple owners inside the OwnerList component, let’s create the Owner component and import it into the OwnerList component.

In the components folder create the following structure:

Owner component - React Lazy Loading

To work with dates we need to install one more third-party libraryreact-moment:

React moment installation

Now we can modify the Owner.js file:

In this child component, we receive the owner’s data, through the props object. Then, we create a row with the data and couple of buttons for a navigation to different components. All buttons are referencing to functions that enable redirection towards the details, update and delete components.

The important thing to notice is that the props object has the “history” property which allows us to navigate programmatically. Furthermore, we are using date format: “DD/MM/YYYY” just to show how easy is to work with formats by using the Moment library. For the create and update components, we are going to use “MM/DD/YYYY”. All that’s left to do is to import this component inside the OwnerList component and display all the owners on the screen.

Displaying Owners Result

Let’s import the Owner component inside the OwnerList component:

Then above the render() part, we are going to create a new function. With this function we are going to call the OnGetData property to fetch the data from the server:

The componentDidMount is a creation lifecycle hook and it is going to trigger as soon as a component mounts.

Finally, inside the render function add a code to populate our “owners” array:

In this function, we check if the data property is populated (because http requests are async requests) and if it is an array. Then for each of the array’s elements, we populate the Owner component with the data. Pay attention to the key property which is mandatory when creating child components from the array of objects. Moreover, we pass the props object to have the access to the “history” property of that object. In the same way, we pass a single owner object to a child component because we want it to be able to use the props.owner syntax.

Excellent.

Now if we navigate to the Owner Actions menu we are going to see the result with all the owners:

OwnersList display - React Lazy Loading

Lazy Content Loading

Until now, we have been loading our OwnerList component eagerly and not lazily, which means that once the application starts all the resources are loaded as well. This is not the best practice because a user might never visit an Owner Actions page, therefore the resources for this page shouldn’t be loaded either.

Let’s modify our project so we can utilize the lazy loading feature.

Let’s create, inside the hoc folder, a new folder AsyncComponent and inside a new file AsyncComponent.js and modify it:

With this component, we are going to load our component asynchronously.

To complete this action, we need to modify the App.js file to load our OwnerList component in async mode:

Now we import our Async component and inside it, we import our OwnerList component. Finally, we are not loading OwnerList inside the Route component anymore, but the AsyncOwnerList.

There it is. Now if we navigate to the Owner Actions page after restarting our app, we are going to see additional chunk file loaded just for this page.

React Lazy Loading Result

Conclusion

By reading this post, you’ve learned:

  • The way to create HOC components
  • How to implement Redux to fetch the data from the server
  • How to use Moment library to format the dates
  • The way to load your components in an async manner by using the Lazy Loading feature

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 handle errors while sending our HTTP requests.

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.