Learn React redux Thunk with a Project

Thunk

We have created a React Redux project ealier in this post. But we have made the API call in our component itself, which should have been done in the action creator.

We will enhance our earlier project to do the API call in the action creator, using the middleware of thunk. The code for the earlier part can be take from this github repo.

We will first create an apis folder in the src folder. Inside it create a shopApi.js file. Here, we are using axios to have our baseURL as the fakestorapi.

shopApi.js

Now, we will create a new Action creator called FETCH_PRODUCTS in our action-types.js file.

action-types.js

Now, in the productsActions.js file, we will create a new action creator of fetchProducts. Notice, that here we are using axios.get(‘/products’) to get to our complete endpoint.

productsActions.js

Next, in our ProductListing.js file we will remove the earlier code of doing an API call and use the fetchProducts action creator.

ProductListing.js

Now, if we go to http://localhost:3000/ we will get an error that Actions must be plain objects and we should use middleware for async actions.

Async

Now, every API call takes 1–2 seconds and require a middleware like Redux thunk, if we use in the action creator. So, we will first install it through the terminal through the below command.

npm i redux-thunk

Next, we will update the code for store.js file to include the thunk. Notice that we are using composeEnhancers to use the thunk middleware.

store.js

Now, we will update the code in productsActions.js to use the dispatch to hit the API endpoint.

productsActions.js

Next, we will also add this in our productsReducer.js file.

productsReducer.js

Now, back in http://localhost:3000/ we are able to get the data again, but this time through Redux Thunk.

localhost

Next, we will do the same in our ProductDetails and not do the API call from there. So, first in productsActions.js we will create new function fetchProduct, using our dispatch.

productsActions.js

Now, in ProductDetails.js file, we will remove the earlier API call and now use the dispatch to call fetchProduct from the Action creator.

ProductDetails.js

We don’t need to make any changes in the Reducer file, as we are already covering the case. Now, we can select an individual item an it is working fine.

This completes our small post to convert our existing application to use Redux thunk. You can find the code for the same in this github repo.

localhost

You can also find this post in video format in this below video.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React — how to create dynamic table

Build a Reusable Responsive Card Component with Styled-Components

Everything You Need to Know About Linked Lists: Data Structure with JavaScript

Design Patterns in JavaScript: Structural

Multi-Tenant AWS Amplify

Customizing Kibana Web Application

What is TypeScript?

Computer sitting open

The Business Owner’s Guide to React Native

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

React routing using React-router (NPM)

React Redux Toolkit with Project

Chat App using WhatsApp web UI and React JS

Create your own Pagination Component using React without any external libraries