Learn React Redux with API Project

8 min readNov 1, 2021

We are going to learn React redux by building an amazing eCommerce project, which will do API call to get data.

We will start from scratch by creating a new react project by the below command.

npx create-react-app react-redux-ecommerce

After that change to the project directory and install axios and react-router-dom by the below command.

npm i axios react-router-dom

Next, we will remove some boiler plate code files, as shown in below screenshot.

Now, in the index.js file remove the not needed content and it will look like below.

Now, for CSS we are going to use semantic UI. So, add the below link in the index.html file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

We also need to install the redux and react-redux in our project. So, install the same through npm in our project.

npm i redux react-redux

Next, in the App.js remove everything and add the below simple code, which we are soon gong to change.

After that let’s have a basic structure in our project. So, create a components and redux folder inside the src folder. Again inside the redux folder create an actions, constants and reducers folder. Also create a file store.js inside it.

Next, create a file action-types.js inside the constants folder and add the below content in it. Here, we are just putting the constants in it.

Next, create a file productsActions.js inside the actions folder and add the below content in it. Here, we are having two action creators — one is for setProducts and other for selectedProduct.

We are soon going to call this action creator from a component.

Now, it’s time to create the reducer. So, create a file productsReducer.js inside the reducers folder and add the below content in it.

Here, we have an initialState which is an object, with a key of products. The products value is an array of objetc and we have put an item now in it. Later on we will get this from the API.

The productsReducer is the usual switch case returning the state now for SET_PRODUCTS.

Next, create an index.js in the reducers folder and add the below content in it. Here, we are creating a combine Reducers as per Redux structure.

Finally, we need to add the code for the store.js file, which will include the reducers now.

Next, we will add the famous redux devtool extension in our project. You can find the details of it here.

We need to install the chrome or firefox extension, depending on our browser and then after that in the store.js file add it in the store as below.

Now, to complete our Redux devtool setup, we need to wrap our whole App in index.js file with Provider, linked with our store.

Now, go to http://localhost:3000/and open the Redux Devtools and in it we can see our state showing properly.

Now, it’s finally time to create some components and link all these things. So, first create a file Header.js inside the components folder and add the below content in it.

After that create a file ProductListing.js inside the components folder and add the below content in it.

Next, create a file ProductDetails.js inside the components folder and add the below content in it.

Next, create a file ProductComponent.js inside the components folder and add the below content in it.

Now, it’s time to put all these components in the App.js file. But we will add these through React router, because we are implementing routing in our project.

Now, we are first going to update our code for Product Listing. In the ProductListing.js file, we are using some semantic ui class and showing the ProductComponent.

Now, in the ProductComponent.js file, we are first using the useSelector hook from react-redux to use the redux state and get all product array. We just have one item and we are displaying it.

Now, we will get the data from a API endpoint. We are going to use the https://fakestoreapi.com/ for the same.

Now, in our ProductListing.js file, we will import axios, useDispatch and setProducts first. Next, we are using the useDispatch hook. After that we are using axios to call our fakestoreapi.

Once we get the result, we are calling the setProducts with our response.data.

Next, we need to update our productsReducer.js file. Here, we are first removing the hardcoded products.

We are also changing the return to destructure the state and add the products as payload.

Back in ProductComponent.js file, we need to loop through the products array and show each item.

We need to forgot one thing to do and that was to change our App.css file. So, put the below content in App.css file.

* {
  font-family: "Roboto", sans-serif;
  padding: 0;
  margin: 0;
}.ui.cards > .card > .image {
  height: 250px;
  padding: 20px;
  background: #fff;
  margin: auto;
}
.ui.cards > .card > .image > img {
  height: 100%;
  max-width: 100%;
  width: auto;
}
.ui.cards > .card > .content > .header {
  height: 48px;
  overflow: hidden;
  margin-bottom: 5px;
}
.ui.cards > .card > .content > .description {
  height: 36px;
  margin-bottom: 0px;
  overflow: hidden;
}
.ui.cards > .card .meta.price {
  margin-bottom: 5px;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}.ui.cards > .card .meta.price > a {
  font-size: 1.3rem;
  color: #222;
}.ui.menu.fixed {
  height: 60px;
  padding-top: 15px;
}.ui.grid.container {
  margin-top: 45px;
}.ui.grid > .row {
  background: #fff;
}
.ui.grid > .row > .column.lp {
  padding: 20px 40px 20px 20px;
  align-self: flex-start !important;
}
.ui.grid > .row > .column.rp {
  padding: 20px 20px 20px 40px;
  text-align: left;
  align-self: flex-start !important;
}.ui.grid > .row > .column > img,
.ui.grid > .row > img {
  height: 100%;
}
.ui.placeholder .header:not(:first-child):before,
.ui.placeholder .image:not(:first-child):before,
.ui.placeholder .paragraph:not(:first-child):before {
  display: none;
}.ui.label,
.ui.labels .label {
  font-size: 22px;
}.column.rp h1 {
  color: #333;
}
.column.rp p {
  font-size: 18px;
  color: #777;
}
.ui.placeholder.segment .column .button,
.ui.placeholder.segment .column .field,
.ui.placeholder.segment .column textarea,
.ui.placeholder.segment .column > .ui.input {
  background-color: #ff3e6c;
  border: 1px solid #ff3e6c;
  color: #fff;
  font-size: 18px;
  margin-left: 0;
}

Now, in localhost we will be able to see all the products in a nice manner.

Next, we will add the functionality for product details ie clicking on a product will take us to the Product details page.

For that we need to add the Link tag to the ProductComponent.js file, which will take us to /product/id.

Now, we need to add a new reducer called selectedProductsReducer in productsReducer.js file.

Now, we need to add this new reducer in our combine reducer in index.js file of reducer folder.

Now, in the ProductDetail.js file we will add the below code. Here, we are first using the useParams() to get the productId. After that we are using the useDispatch() to dispatch selectedProduct to the action creator.

We are using another API endpoint to get the single product details in fetchProductDetail().

Once the state variable product is updated we are getting it through the useSelector hook.

Now, if we click on any particular product we are getting it’s detail back in console.

Now, it’s time to write the JSX to display our products. First, we need to destructure the product.

After that we are adding the JSX in the return. It is showing the Loading… first and then using semantic ui showing the image, price, category and description.

Now, we will see our beautiful products, when we click on any product.

Now, there is an issue in our project and that is for a moment we are been shown the old product, when we click on any product. To fix it we need to remove it from redux store.

So, in our productsActions.js we will add a new action creator for removeSelectedProduct, which will just return the type.

Now, we also need to update the same in our productsReducer.js file.

Back in the ProductDetails.js file, we are dispatching removeSelectedProduct in the cleanup function of the useEffect.

We have also added a beautiful loader provided by semantic ui instead of the Loading text.

Now, our project is complete and showing the selected product perfectly. If we see the Redux devtool, we will find action creators been fired in correct sequence.

You can find this project also on my YouTube channel.

Learn React Redux with API Project

Written by Nabendu Biswas