Product Details are not visible through React and Redux

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>

Solution

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 });