React redux state is not loading on production build - reactjs

Question

So i m having a very wired issue with react app its working fine in localhost but not working on production server.
In detail
im using react with redux and redux state is coming empty on production server
Image 1: Localhost Screen shot (which is working fine)
Image 2: Production Server Image Where menu state is empty (Not Working)
**
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom'
//global settings
import {SETTINGS} from '../../global/settings';
//calling component
import MenuItem from './menu-items.component';
//menu acctions
import {SET_MENU,SET_LOADING_STATUS} from '../../redux/menu/menu.actions';
//global JSON
import {JSON_URLS} from '../../global/json-urls';
//Nav bar
import {Collapse, Navbar,NavbarToggler,NavbarBrand,Nav,NavbarText,NavItem,} from 'reactstrap';
//reactstrap Spinner for loading
import { Spinner } from 'reactstrap';
class Menu extends React.Component{
constructor(){
super();
this.state={
isOpen: false,
setIsOpen: false,
}
}
componentDidMount(){
const {SET_MENU} = this.props;
const {SET_LOADING_STATUS}= this.props;
fetch('https://wp2.neton.com.au/wp-json/wp-api-menus/v2/menus/2')
.then(response =>response.json())
.then(menu=>SET_MENU(menu))
.then(menu=>SET_LOADING_STATUS(false))
}
render(){
const {menu}=this.props;
const {loading}=this.props;
const {isOpen, setIsOpen}= this.state;
console.log('Menu '+menu);
//for Menu
const toggle = () => setIsOpen(!isOpen);
return(
<div className="menu-menu">
{
(Array.isArray(menu.items))
?
<Navbar color="light" light expand="md">
<NavbarBrand href="/">{SETTINGS.SITE_NAME}</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
{(menu.items).map(menu=><MenuItem key={menu.id} menu={menu} />)}
<NavItem><Link to={`${SETTINGS.BASE_URL}posts`} className="nav-link">All Posts</Link></NavItem>
<NavItem><Link to={`${SETTINGS.BASE_URL}pages`} className="nav-link">All Pages</Link></NavItem>
</Nav>
<NavbarText>Simple Text</NavbarText>
</Collapse>
</Navbar>
:
(loading)
?
<Spinner color="dark" className="text-center d-block m-auto" />
:
''
}
</div>
)
}
}
const mapStateToProps=(state)=>({
menu:state.menu.menu,
loading:state.menu.loading
})
const mapDispatchToProps=(dispatch)=>({
SET_MENU:menu=>dispatch(SET_MENU(menu)),
SET_LOADING_STATUS:status=>dispatch(SET_LOADING_STATUS(status))
})
export default connect(mapStateToProps,mapDispatchToProps)(Menu);
**

Answer 1

OK FINALLY FOUND THE BUG!!
so it has nothing to do with redux but the issue is related to react-router-dom
so when we will build production we have to make sure two things
package.json should include
"homepage": "https://YOUR-DOMIAN/DIRECTORY",
DIRECTORY:where the build files will go
in ROUTER THIS DIRECTORY SHOULD ALSO BE MENTION
<Switch>
<Route exact path="/DIRECTORY/" component={HomePage} />
<Switch>
I was having issue with 2 point hope it helps others :)