Fetch initial data on page load in React-Redux application

Dispatch an action instead of using componentDidMount()

Photo by Maxim Ilyahov on Unsplash

Making API calls and fetching data in a React-Redux app can be confusing when you are new to Redux. During my initial days of reduxing, I used to make my initial data fetch request in my root component’s componentDidMount() method. As soon as I receive the data, I dispatch an action from my root component so that the data get stored in the redux store.

It’s a very bad way of storing some initial data to the store. What if I told you, there is a better and cleaner way of doing this task? Let’s see how.

AGENDA: HOW TO SAVE INITIAL DATA TO REDUX STORE ON APP LOAD

What are we going to build?

Suppose we are making a news application and when the app loads, it displays the top 5 posts on the home screen. So, we are going to build the functionality to fetch 5 posts from an API and storing them in the Redux store.

We will use redux-thunk as a middleware. I am not going to explain how redux, middleware and async flow work in redux. If you want to take a quick look at the overall flow of redux, look at this amazing flowchart created by The Net Ninja on Youtube.

Figure 1: Overall flow of Redux (Credits: The Net Ninja)

Let’s start coding

1. Create a new react app.

npx create-react-app <your-app-name>

2. Delete everything from the src directory. Make your folder structure to look like this.

Folder structure for this app

3. Let’s install other dependencies

npm i redux react-redux redux-thunk axios --save

4. Let’s create our actions creators in actions.js

I am using Axios for making a request to JSONPlaceholder API which gives us a list of fake posts.

actions.js

It’s a good practice to make a sync action creator and an async action creator, which after doing side-effects like API calls, dispatch the sync action creator with the required data.

5. Now, let’s create our reducer in reducers.js, which handles the above dispatched action and stores the posts in the redux store

reducers.js

6. Let’s create our store in store.js

store.js

Finally, we have our redux setup. Now, we just need to dispatch the fetchPosts() in actions.js, and posts will be fetched and get stored in the redux store.

But, the question is where to dispatch it?

We need to load the posts when our app loads. So, the only way to do this is to dispatch it in our starting file of the app, index.js

7. Let’s create index.js

In our index.js, we finally dispatch the fetchPosts() before ReactDOM.render(). The posts from the API will be fetched and stored in the redux store. So, your components can connect to the store and use the data after the initial render.

Posts successfully fetched and stored in the redux store on app load

So, you learned how to make API calls on page load in a React-Redux application. This is a common requirement of some apps to load some data on page load. Go and make awesome apps using this technique.

Thank you for reading!

Check my other stories —

The Best Approach To Design React Component Hierarchy