React Redux breaking on page routing - reactjs

Question

Hello so I have added redux to the project(Ecom site) that I am working on, so I am fetching products with the help of Redux, I just then added another redux Action for when the user clicks on the product to view the details so it works and I do get back the results that I expect but now the problem is when I page route to a page which has redux I get an error until I reload the page and everything works perfectly
Code to my store
import { combineReducers, applyMiddleware, compose, createStore } from "redux";
import thunk from "redux-thunk";
import { HoodiesFecthReducer } from "./Reducers/ProductsFecthReducer/HoodiesFetchReducer";
import { JacketsFetchReducer } from "./Reducers/ProductsFecthReducer/JacketsFecthReducer";
import productDetailsFetchReducer from "./Reducers/ProductsFecthReducer /ProductDetailsFetchReducer";
import { T_ShirtsFetchReducer } from "./Reducers/ProductsFecthReducer/T-ShirtFetchReducer";
const initialState = {};
const reducers = combineReducers({
Hoodies: HoodiesFecthReducer,
Jackets: JacketsFetchReducer,
T_Shirts: T_ShirtsFetchReducer,
ProductDetail: productDetailsFetchReducer,
});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export const store = createStore(
reducers,
initialState,
composeEnhancer(applyMiddleware(thunk))
);
Code below is one of the action that fetches the product so I will add in one because they are all the same I avoid adding tons of code that are performing same task
import {
PRODUCT_FETCH_FAIL,
PRODUCT_FETCH_REQUEST,
PRODUCT_FETCH_SUCCESS,
} from "./actionTypes";
import axios from "axios";
export const JacketsFetchAction = () => async (dispatch) => {
const url = "http://127.0.0.1:5000/api/clothes/jackets";
try {
dispatch({ type: PRODUCT_FETCH_REQUEST });
const { data } = await axios.get(url);
dispatch({ type: PRODUCT_FETCH_SUCCESS, payload: data });
} catch (error) {
dispatch({ type: PRODUCT_FETCH_FAIL, payload: error });
}
};
So now things started breaking when I added this action to the mix
import {
PRODUCT_FETCH_FAIL,
PRODUCT_FETCH_REQUEST,
PRODUCT_FETCH_SUCCESS,
} from "./actionTypes";
import axios from "axios";
const productDetailFetchAction = (productID, productCategory) => async (
dispatch
) => {
const url = `http://127.0.0.1:5000/api/clothes/product-detail/${productCategory} /${productID}`;
try {
dispatch({ type: PRODUCT_FETCH_REQUEST });
const { data } = await axios.get(url);
dispatch({ type: PRODUCT_FETCH_SUCCESS, payload: data });
} catch (error) {
dispatch({ type: PRODUCT_FETCH_FAIL, payload: error });
}
};
export default productDetailFetchAction;