ルーターが反応を変更してナビゲーションを変更しましたが、還元を使ってページをレンダリングしません

Question

/homeには/profileページに移動しなければならないボタンがあるシンプルな反応ルータ - レデュクスアプリケーションがあります。現在、私のコードは次のようになっています。

アクション/ 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('/')) 
    } 
} 

コンテナ/ 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)) 

コンテナ/ 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)) 

リデューサー/ 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()) 
}) 

このコードは、URLを変更することなく、ホームページ上homeボタンがクリックされたときにプロフィールページをレンダリングされていません。また、redux logger出力の画像のlinkもここにあります。

私は数時間これに固執しており、他のSOの回答はそれほど助けにはなりませんでした。どんな助けもありがとう。

Answer 1

ホームをクリックすると、ホームルートがレンダリングされるはずです。それはそれがするべきものではありませんか？