没有任何事情发生，调度功能也没有错误答案

【问题标题】：Nothing happening and no errors with dispatch functions没有任何事情发生，调度功能也没有错误
【发布时间】：2016-11-30 12:03:15
【问题描述】：

我正在使用react-router 和react-router-redux 管理我的React 申请路线。

我使用以下配置设置路由器：

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.log logout，并返回logout is not defined

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

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

【问题讨论】：

如果你在 console.log 里面 mapDispatchToProps logout() 函数，你看到日志了吗？
@DavinTryon 我更新了我的问题，插入了这个测试的结果。 (logout is not defined)
你为什么不用browserHistory.push('/')？您正在将browserHistory 与store 同步，所以一切都会好起来的
当然console.log(logout) 将显示logout is not defined，因为未定义注销！ @DavinTryon 的意思是，将您的 console.log 放入 logout() { ... } 函数中。它被调用了吗？
@free-soul 如果我尝试console.log(this.props.logout); 正在返回正确的函数，如果我在注销dispatch 之前输入一些console.log，它也会被执行。

标签： javascript reactjs redux react-router react-router-redux

【解决方案1】：

combineReducers 应该将对象作为第一个参数，如下所示：

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

你给它一个数组。我怀疑push不起作用的原因是路由器reducer没有正确注册。

【讨论】：

很抱歉，这是我在帖子编辑中的失败，在我的真实代码中是一个对象，我更新了我的问题帖子。
没问题，但您仍然没有正确注册路由器减速器。应该是combineReducers({...Reducers, routing: routerReducer})。他们以您的方式拥有它，它在routerReducer 键下注册它

【解决方案2】：

我解决了这个问题。

出现这个问题是因为我没有使用react-routerredux`中间件，所以当我调度时，可能没有按状态更新浏览器URL。

按照我的路线配置：

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;

【讨论】：