Apply middleware in redux, Redux thunk.

Author: WebDeveloperGuide

web_panel/package-lock.json

@@ -17,6 +17,7 @@
     "react-slick": "^0.28.1",
     "react-toastify": "^8.2.0",
     "redux": "^4.1.2",
+    "redux-thunk": "^2.4.1",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.3",
     "web-vitals": "^2.1.4"

web_panel/package.json

@@ -1,8 +1,7 @@
 import React, {useEffect} from 'react';
-import axios from 'axios';
 import {Link} from 'react-router-dom';
 import {useSelector,useDispatch} from 'react-redux';
-import {setProducts} from '../redux/actions/productActions';
+import {getProducts} from '../redux/actions/productActions';
 import Product from './Product';
 import Loading from '../components/Loading';
 
@@ -18,16 +17,8 @@ const FeaturedProducts = () => {
 
 	const dispatch = useDispatch();
 
-	const fetchProducts = async() =>{
-		const response = await axios.get("https://dummyjson.com/products").catch((err) =>{
-			console.log(err);
-		});
-
-		dispatch(setProducts(response.data.products));
-	};
-
 	useEffect(()=>{
-		fetchProducts();
+		dispatch(getProducts());
 	},[])
 
 	return(

web_panel/src/components/FeaturedProducts.js

@@ -2,14 +2,13 @@ import React,{useEffect} from 'react';
 import {useSelector,useDispatch} from 'react-redux';
 import Filters from './Filters';
 import Product from './Product';
-import axios from 'axios';
-import {setProducts} from '../redux/actions/productActions';
+import {getProducts} from '../redux/actions/productActions';
 import Loading from '../components/Loading';
 
 const Products = () => {
 
 	const products = useSelector((state)=> state.allProducts.products);
-	console.log("products",products)
+	
 	const renderList = products.map((product)=>{
 		return(
 			<Product detail={product} key={product.id}/>
@@ -18,16 +17,8 @@ const Products = () => {
 
 	const dispatch = useDispatch();
 
-	const fetchProducts = async() =>{
-		const response = await axios.get("https://dummyjson.com/products").catch((err) =>{
-			console.log(err);
-		});
-
-		dispatch(setProducts(response.data.products));
-	};
-
 	useEffect(()=>{
-		fetchProducts();
+		dispatch(getProducts());
 	},[])
 
 	return(

web_panel/src/components/Products.js

@@ -7,7 +7,6 @@ import ProductDetail from '../components/ProductDetail';
 import Sidebar from '../components/Sidebar';
 import Cart from '../components/Cart';
 import Loading from '../components/Loading';
-import axios from 'axios';
 import {setProductDetail,resetProductDetail} from '../redux/actions/productActions';
 import { toast } from 'react-toastify';
 import {ToastObjects} from "../util/toastObject";
@@ -18,22 +17,11 @@ const ProductDetailPage = () => {
 	const {id} = useParams();
 	const productDetail = useSelector((state)=> state.allProducts.productDetail);
 
-	const dispatch = useDispatch();
-
-	const fetchProductDetail = async() =>{
-		const response = await axios.get(`https://dummyjson.com/products/${id}`).catch((err) =>{
-		  toast.error("No data found", ToastObjects);
-		});
-		
-		if(response){
-			dispatch(setProductDetail(response.data));	
-		}
-		
-	};
+	const dispatch = useDispatch();	
 
 	useEffect(()=>{
 		if(id && id != ""){
-			fetchProductDetail();	
+			dispatch(setProductDetail(id));
 		}
 
 		return () => {

web_panel/src/pages/ProductDetailPage.js

@@ -1,21 +1,42 @@
 import { ActionTypes } from '../constants';
+import axios from 'axios';
+import { toast } from "react-toastify";
+import {ToastObjects} from "../../util/toastObject";
 
-export const setProducts = (products) =>{
-	return{
-		type:ActionTypes.SET_PRODUCTS,
-		payload:products
-	}
+export const getProducts = () => async(dispatch) =>{
+	try{
+		const response = await axios.get("https://dummyjson.com/products");
+		dispatch({ type: ActionTypes.FETCH_PRODUCTS, payload: response.data.products });
+
+	} catch (error){
+
+		const message =
+      error.response && error.response.data.message
+        ? error.response.data.message
+        : error.message;
+
+        toast.error(message, ToastObjects);
+	}	
 }
 
-export const setProductDetail = (product) =>{
-	return{
-		type:ActionTypes.SET_PRODUCT_DETAIL,
-		payload:product
+
+export const setProductDetail = (id) => async(dispatch) =>{	
+	try{
+		const response = await axios.get(`https://dummyjson.com/products/${id}`);
+		console.log(response)
+		dispatch({ type: ActionTypes.SET_PRODUCT_DETAIL, payload: response.data });
+
+	} catch (error){
+
+		const message =
+      error.response && error.response.data.message
+        ? error.response.data.message
+        : error.message;
+
+        toast.error(message, ToastObjects);
 	}
 }
 
-export const resetProductDetail = () =>{
-	return{
-		type:ActionTypes.RESET_PRODUCT_DETAIL
-	}
+export const resetProductDetail = () => async(dispatch) =>{
+	dispatch({ type: ActionTypes.RESET_PRODUCT_DETAIL});	
 }

web_panel/src/redux/actions/productActions.js

@@ -1,5 +1,5 @@
 export const ActionTypes = {
-	SET_PRODUCTS:"SET_PRODUCTS",
+	FETCH_PRODUCTS:"FETCH_PRODUCTS",
 	SET_PRODUCT_DETAIL:"SET_PRODUCT_DETAIL",
 	RESET_PRODUCT_DETAIL:"RESET_PRODUCT_DETAIL"
 }

web_panel/src/redux/constants/index.js

@@ -7,7 +7,7 @@ const initialState = {
 
 export const productReducer = (state = initialState,{type,payload}) => {
 	switch(type){
-		case ActionTypes.SET_PRODUCTS:
+		case ActionTypes.FETCH_PRODUCTS:
 			return {...state,products:payload};
 		case ActionTypes.SET_PRODUCT_DETAIL:
 			return {...state,productDetail:payload};

web_panel/src/redux/reducers/productReducer.js

@@ -1,10 +1,13 @@
-import { createStore } from "redux";
+import { createStore, applyMiddleware, compose } from "redux";
 import reducers from "./reducers";
+import thunk from 'redux-thunk';
+
+const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
 
 const store = createStore(
   reducers,
-  {},
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+  composeEnhancer(applyMiddleware(thunk))
 );
 
 export default store;