react router changes navigation but does not render page using redux - node.js

Question

I have got a simple react-router-redux application going on where /home has a button which when clicked should navigate to /profile page. Currently my code looks like this.
actions/index.js
import { push } from 'react-router-redux'
import * as actionTypes from '../constants'
const homeClicked = () => {
return { type: actionTypes.HOME_CLICK }
}
const profileClicked = () => {
return { type: actionTypes.PROFILE_CLICK }
}
export const handleHomeClick = () => {
return (dispatch) => {
dispatch(homeClicked())
dispatch(push('/profile'))
}
}
export const handleProfileClick = () => {
return (dispatch) => {
dispatch(profileClicked())
dispatch(push('/'))
}
}
containers/HomeContainer.js
import React from 'react'
import { connect } from 'react-redux'
import * as actions from '../actions'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
class Home extends React.Component {
handleClick = () => {
this.props.handleHomeClick();
}
render() {
return (
<div className='Home'>
<button onClick={this.handleClick}>Home</button>
</div>
)
}
}
Home.propTypes = {
handleHomeClick: PropTypes.func.isRequired
}
const mapStateToProps = () => {
return {}
}
export default withRouter(connect(mapStateToProps, actions)(Home))
containers/ProfileContainer.js
import React from 'react'
import { connect } from 'react-redux'
import * as actions from '../actions'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
class Profile extends React.Component {
handleClick = () => {
this.props.handleProfileClick();
}
render() {
return (
<div className='Profile'>
<button onClick={this.handleClick}>Profile</button>
</div>
)
}
}
Profile.propTypes = {
handleProfileClick: PropTypes.func.isRequired
}
const mapStateToProps = () => {
return {}
}
export default withRouter(connect(mapStateToProps, actions)(Profile))
reducers/index.js
import { HOME_CLICK, PROFILE_CLICK } from '../constants'
import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
const clickReducer = (state={ message: 'HOME' }, action) => {
switch(action.type) {
case HOME_CLICK:
return { message: 'PROFILE' };
case PROFILE_CLICK:
return { message: 'HOME' };
default:
return state
}
}
export default combineReducers({
clicking: clickReducer,
routing: routerReducer
})
constants.js
export const HOME_CLICK = 'HOME_CLICK'
export const PROFILE_CLICK = 'PROFILE_CLICK'
history.js
import { createBrowserHistory } from 'history'
export default createBrowserHistory()
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux';
import createRoutes from './routes'
import rootReducer from './reducers'
import thunk from 'redux-thunk'
import browserHistory from './history'
import reduxLogger from 'redux-logger'
import { createStore, applyMiddleware } from 'redux'
import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux';
const middlewares = applyMiddleware(
thunk,
routerMiddleware(browserHistory),
reduxLogger
);
const store = createStore(rootReducer, middlewares)
const history = syncHistoryWithStore(browserHistory, store)
const routes = createRoutes(history)
ReactDOM.render(
<Provider store={store}>
{routes}
</Provider>,
document.getElementById('root')
)
routes.js
import React from 'react'
import { Router, Route, Switch } from 'react-router'
import HomeContainer from './containers/HomeContainer'
import ProfileContainer from './containers/ProfileContainer'
const createRoutes = (history) => {
return (
<Router history={history}>
<Switch>
<Route exact path='/' component={HomeContainer}/>
<Route path='/profile' component={ProfileContainer}/>
</Switch>
</Router>
)
}
export default createRoutes
app.js
import express from 'express'
import config from './config'
import path from 'path'
const app = express()
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')))
app.get('*', (req, resp) => {
resp.render('index');
})
app.listen(config.port, config.host, () => {
console.info('Server listening to', config.serverUrl())
})
This code is changing the url but not rendering the profile page when the home button on the home page is clicked. Also here's a link of the picture of redux logger output.
I am stuck on this for a few hours and other SO answers have not been much of a help. Any help would be appreciated.

Answer 1

When you click home it should render the home route as you have it written now? Isn't that what it is supposed to do.