ディスパッチ機能で何も起こらず、エラーもない

Question

私のReactアプリケーションルートはreact-routerとreact-router-reduxで管理しています。

私は次のような構成でルータを設定

：

import {Provider} from 'react-redux' 
import {Router, browserHistory} from 'react-router' 
import {createStore, combineReducers} from 'redux' 
import {routerReducer} from 'react-router-redux'; 
import {syncHistoryWithStore} from 'react-router-redux' 

import Reducers from './reducers'; // contains all my reducers, 

const store = createStore(combineReducers(
    {...Reducers, routerReducer} 
)); 

const history = syncHistoryWithStore(browserHistory, store); 

const AppRoute = (
    <Provider store={store}> 
     <Router history={history}> 
      <Route path='login' components={PageLogin}/> 
      <Route path='system' components={PageSystem}> 
       <Route path="profile" component={PageProfile}/> 
      </Route> 
     </Router> 
    </Provider> 
); 

export default AppRoute; 

が、私は任意のルータ機能を派遣してみてください。

import React from 'react'; 
import {Link, Route} from 'react-router'; 
import {connect} from 'react-redux'; 
import {replace, push} from 'react-router-redux'; 

class SystemMenu extends React.Component { 
    constructor(props) { 
     super(props); 
     this.logout = this.logout.bind(this); 
    } 

    logout() { 
     this.props.logout(); 
    } 

    render() { 
     return (
      <ul className="system-menu"> 
       <li className={this.isActual("/system/profile")}> 
        <Link to="/system/profile">Profile</Link> 
       </li> 
       <li className={this.isActual("/system/unit")}> 

        <Link to="/system/unit">Units</Link> 
       </li> 
       <li> 
        <button onClick={this.logout}>Logout</button> 
       </li> 
      </ul> 
     ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     router: state.router, 
     actualPage: state.menu.actualPage 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     logout() { 
      dispatch(push('/login')); 
     } 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(SystemMenu); 

私はQUE Linkコンポーネントをクリックすると、ページが変更され、しかし、私はLogoutをクリックすると、ボタンを押してデバッグすると、dispatch(push('/login'));行が実行されていますが、何も起こっておらず、コンソールにエラーが発生していません。

構成が悪いのは何ですか？

---

私はmapDispatchToProps関数内console.loglogoutを試みたが、logout is not defined

const mapDispatchToProps = (dispatch) => { 
    console.log(push, logout); 

    return { 
     logout() { 
      dispatch(push('/login')); 
     } 
    }; 
}; 

Answer 1

combineReducersを返すことは、このような最初の引数としてオブジェクトを取る必要があります：あなたがしている

const store = createStore(
    combineReducers({ 
    ...reducers, 
    routing: routerReducer 
    }) 
) 

代わりにArrayを与えます。 ルータレデューサーが正しく登録されていないため、pushが機能しない理由が考えられます。

Answer 2

この問題は解決しました。

react-router redux`ミドルウェアを使用していないため、この問題が発生しています。そのため、ディスパッチするとブラウザURLを状態で更新していない可能性があります。

私のルート設定後：あなた `` mapDispatchToProps`ログアウト（） `関数内` console.log`は、あなたがログを見なければ

import {Provider} from 'react-redux' 
import {Router, browserHistory} from 'react-router' 
import {createStore, combineReducers, applyMiddleware} from 'redux' 
import {routerReducer} from 'react-router-redux'; 
import {syncHistoryWithStore, routerMiddleware} from 'react-router-redux' 

import Reducers from './reducers'; // contains all my reducers, 

const middleware = [routerMiddleware(browserHistory)]; 

const store = createStore(combineReducers(Reducers), compose(
    applyMiddleware(...middleware) 
)); 

const history = syncHistoryWithStore(browserHistory, store); 

const AppRoute = (
    <Provider store={store}> 
     <Router history={history}> 
      <Route path='login' components={PageLogin}/> 
      <Route path='system' components={PageSystem}> 
       <Route path="profile" component={PageProfile}/> 
      </Route> 
     </Router> 
    </Provider> 
); 

export default AppRoute;