I'm creating a page which will show a particular product details using React and Redux. Idk what error is there but the page keeps on loading and not showing any details. It is loading like this: .
so what can be done so that the product details can visible?
the product details page:
import axios from 'axios';
import { useContext, useEffect, useReducer, useRef, useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import {Carousel} from "react-material-ui-carousel";
import "./productDetailscss.css";
import { useSelector,useDispatch } from "react-redux";
import { getProductDetails } from "../actions/productAction";
import {productDetailsReducer} from "../reducers/productReducer";
import Loader from "../layout/loader/Loader";
import {Row,Col,Card,ListGroup,Badge,Button,Rating} from 'react-bootstrap';
import { Helmet } from "react-helmet";
import { PRODUCT_DETAILS_FAIL } from '../constants/productConstants';
const ProductDetails = () => {
const params = useParams();
const { id } = params;
const [{loading,error,product},dispatch] = useReducer(productDetailsReducer,{
product: [],
loading: true,
error: '',
});
useEffect(() => {
const fetchData = async () => {
try {
dispatch({ type: 'FETCH_REQUEST' });
const result = await axios.get(`/api/v1/product/${id}`);
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
} catch (err) {
dispatch({type:PRODUCT_DETAILS_FAIL,payload:err.message});
}
};
fetchData();
// dispatch(getProductDetails(id));
},[id])
return loading ? (
<Loader />
) : error ? (
<div>{error}</div>
) : (
<div>dannnnn</div>
);
}
export default ProductDetails;
Product Details reducer:
//GET PRODUCT DETAILS
export const productDetailsReducer = (state = {product: {}},action)=>{
switch(action.type){
case PRODUCT_DETAILS_REQUEST:
return{
loading:true,
...state,
}
case PRODUCT_DETAILS_SUCCESS:
return{
...state,
loading:false,
product:action.payload
}
case PRODUCT_DETAILS_FAIL:
return{
...state,
loading:false,
error:action.payload,
}
case CLEAR_ERROR:
return{
...state,
error:null,
}
default:
return state;
}
};
Product Route
const express = require("express");
const { getAllProducts,createProduct,updateProduct,deleteProduct,getSingleProductDetails} = require("../controllers/productControllers");
const productSchema = require("../models/productModel");
const {isAuthenticatedUser,authorizeRoles} = require("../middleware/auth");
const user = require("../models/userModels");
const mongoose = require("mongoose");
const readGroup = [user.roles]
const router = express.Router();
router.route("/product/:id").put(updateProduct).delete(deleteProduct).get(getSingleProductDetails);
router.route("/product_under").get(underFiveHundred); //products under 500
module.exports = router
Routes
<Routes>
<Routes><Route path="/" element={<Home />}></Route></Routes>
<Routes> <Route path="/cart" element={<Cart />}></Route></Routes>
<Routes><Route path="/product/:id" element={<ProductDetails />} />
</Routes>
CodePudding user response:
const [{loading,error,product},dispatch] = useReducer(productDetailsReducer,{
product: [],
loading: false,
error: '',
});
CodePudding user response:
you should dispatch this action with following actionType:
dispatch({ type: 'PRODUCT_DETAILS_REQUEST' });
dispatch({ type: 'PRODUCT_DETAILS_SUCCESS', payload: result.data });
instead of
dispatch({ type: 'FETCH_REQUEST' });
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });