may i use this code for finduserDetail in react using redux-thunk dispatch to calling function

Question

This code for finduserdetail by hitting function with help of dispatch method and passing (match.params.id) not working, even function not called as I know on dispatch method it should be called how may I call this so that our stat could be update in root.js file then I can show detail on my ui by using useselector

in productDetail.js

import { Fragment } from "react";
import Carousel from "react-material-ui-carousel";
import {useParams} from "react-router-dom";

import './ProductDetails.css';
import {useDispatch} from "react-redux";

import { useEffect } from "react";
import { getProductDetail } from "../../actions/productAction";

const ProductDetails = () =>{
    console.log("hello this is detail")
    const dispatch= useDispatch();
   let params = useParams()
    const id= params.id;
    //  const {product,error} = useSelector(
    //      (state) =>state.product)
    useEffect(()=>{
        
        dispatch(getProductDetail(id))
    }, [dispatch, id])  
    return(
        <Fragment>
            <div className="ProductDetails">
                <div>
                    <Carousel>
                        {/* {product.images &&
                         product.images.map((item,i)=>{
                            <img 
                            className="CarouselImage"
                            key={item.url}
                            src={item.url}
                            alt={`${i} Slide`}
                            />
                         })} */}
                    </Carousel>
                </div>
            </div>
        </Fragment>
    );
};

export default ProductDetails

and using for calling api for findproductDetail using getProductDetail in productAction.js

export const getProductDetail =(id) => async (dispatch) => {
   
    try {

        dispatch({ type: PRODUCT_DETAILES_REQUEST });
        const { data } = await axios.get(`/api/v1/product/${id}`);

        dispatch({
            type: PRODUCT_DETAILES_SUCCESS,
            payload: data,
        });

    } catch (error) {
        dispatch({
            type: PRODUCT_DETAILES_FAIL,
            payload: error.response.data.message,
        });


    }
};

and one other file productReducer.js

export const productDetailsReducer = (state = { product: {} }, action) => {

    switch (action.type) {
        case PRODUCT_DETAILES_REQUEST:
            return {
                loading: true,
                ...state,
            };
        case PRODUCT_DETAILES_SUCCESS:
            return {
                loading: false,
                product: action.payload.product,
            
            };
        case PRODUCT_DETAILES_FAIL:
            return {
                loading: false,
                error: action.payload,
            };

and another file store.js

import { legacy_createStore as createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import { productDetailsReducer, productReducer } from './reducers/productReducer';


const reducer = combineReducers({
     products: productReducer,
     product: productDetailsReducer,
 
});

let initialState ={};

const middleware = [thunk];

const store = createStore(reducer, initialState,
    composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

These stuff not working. I am quite beginner in React programming

import { Fragment } from "react";
import Carousel from "react-material-ui-carousel";
import {useParams} from "react-router-dom";

import './ProductDetails.css';
import {useDispatch} from "react-redux";

import { useEffect } from "react";
import { getProductDetail } from "../../actions/productAction";


const ProductDetails = () =>{
    console.log("hello this is detail")
    const dispatch= useDispatch();
   let params = useParams()
    const id= params.id;
    //  const {product,error} = useSelector(
    //      (state) =>state.product)
    useEffect(()=>{
        
        dispatch(getProductDetail(id))
    }, [dispatch, id])  
    return(
        <Fragment>
            <div className="ProductDetails">
                <div>
                    <Carousel>
                        {/* {product.images &&
                         product.images.map((item,i)=>{
                            <img 
                            className="CarouselImage"
                            key={item.url}
                            src={item.url}
                            alt={`${i} Slide`}
                            />
                         })} */}
                    </Carousel>
                </div>
            </div>
        </Fragment>
    );
};

export default ProductDetails

and using for calling api for findproductDetail using getProductDetail in productAction.js

export const getProductDetail =(id) => async (dispatch) => {
   
    try {

        dispatch({ type: PRODUCT_DETAILES_REQUEST });
        const { data } = await axios.get(`/api/v1/product/${id}`);

        dispatch({
            type: PRODUCT_DETAILES_SUCCESS,
            payload: data,
        });

    } catch (error) {
        dispatch({
            type: PRODUCT_DETAILES_FAIL,
            payload: error.response.data.message,
        });


    }
};

and one other file productReducer.js

export const productDetailsReducer = (state = { product: {} }, action) => {

    switch (action.type) {
        case PRODUCT_DETAILES_REQUEST:
            return {
                loading: true,
                ...state,
            };
        case PRODUCT_DETAILES_SUCCESS:
            return {
                loading: false,
                product: action.payload.product,
            
            };
        case PRODUCT_DETAILES_FAIL:
            return {
                loading: false,
                error: action.payload,
            };

and another file store.js

import { legacy_createStore as createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import { productDetailsReducer, productReducer } from './reducers/productReducer';


const reducer = combineReducers({
     products: productReducer,
     product: productDetailsReducer,
 
});

let initialState ={};

const middleware = [thunk];

const store = createStore(reducer, initialState,
    composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

The most important stuff my redux state is not updating because of id matching condition once if state will get update I am checking using redux tool