Today we’ll show you how to implement API call in React with Redux using redux-thunk. In the previous article, we have explained the redux example step by step for beginners and now in this article, we teach you how to fetch data from an API using redux (React-Redux async example).

Basic API Call in React with Redux and Intro to Thunk Middleware, React-Redux Async example with Thunk middleware, Fetching data from an api using React/Redux, react redux api example, react redux fetch data from api, redux thunk hooks, redux dispatch promise, redux async await, for more complex asynchronous actions, which of the following would work?, simple react redux api example.

In order to implement API call or async function, we have to use middleware in the redux application. So in this article, we’ll use the redux-thunk npm package. Let’s begin with an example.

Example of the redux thunk

We’ll create an example where we call sample API to get data and display in table form. Store all the data coming from the API response into the redux store. We’ll get data from the store and display it on the Content component. Also manage the pagination in the Sidebar component.

From the Sidebar component, when we click on pagination then we’ll again place an API to get data based on given page number and the received API response will be stored in redux. So the Content component will update as the data gets changed.

We recommend you to check the previous article before starting this.

Steps to fetch data from an API using redux thunk

1. Setting up the Redux Store
2. Install dependency
3. Update redux store configuration
4. Create action types and actions
5. Create and combine reducer
6. Create async actions
7. Update components and css
8. Output

1. Setting up the Redux Store

First, let’s setup the redux store in React application. If you don’t know how to implement redux in ReactJS then refer to the link below.

2. Install dependency

As we discussed, we have to install a redux-thunk package to complete the example. Run the script below for installation.

3. Update redux store configuration

Let’s begin with the store configuration. In order to use redux-thunk, we have to use applyMiddleware from redux. Check below code for more configuration.

store.js

4. Create action types and actions

We have to create a few more action types to create a demo.

• GET_USER_LIST_STARTED – Use it before API call
• GET_USER_LIST_SUCCESS – Use it when we received success response
• GET_USER_LIST_FAILURE – Use it on API failure response

Your file should look like below.

actions/actionTypes.js

Now create a userActions.js file where we’ll define actions for three different types like Before API call, On API success response and On API failure response.

actions/userActions.js

5. Create and combine reducer

It’s time to create a user reducer in reducers directory for three types of actions and combine it together.

reducers/userReducer.js

6. Create async actions

To manage all types of async actions, we have to create a new directory name as asyncActions and to place an API call, we’ll create user async action. Check the code below.

asyncActions/userAsyncActions.js

7. Update components and css

We’ve to update two components to connect the user store.

Content component:

In this component, first we’ll get the user list on componentDidMount and display those list in table form using the redux store.

pages/Content.js

Sidebar component:

We’ll manage the user table pagination in this component and get the new list by clicking on pagination through the redux store. Check the code below.

pages/Sidebar.js

Now Update the css to slightly change the style. Our goal is focusing on the functionality so we are writing less style for components.

App.css

8. Output

Run your application and check the output.

That’s it for today.
Thank you for reading. Happy Coding!

Demo & Source Code