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'));行，但没有发生任何事情，也没有发生任何事情控制台出错。

配置中哪些更糟糕？

我在console.log函数中尝试logout mapDispatchToProps，然后返回logout is not defined

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

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

Answer 1

CloseHandle(hThread)应该将一个对象作为第一个参数，如下所示：

combineReducers

你改为给它一个数组。我怀疑const store = createStore( combineReducers({ ...reducers, routing: routerReducer }) )无效的原因是因为路由器reducer未正确注册。

Answer 2

我解决了这个问题。

发生此问题是因为我没有使用react-router redux`中间件，所以当我调度时，可能没有按状态更新浏览器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;

调度功能没有发生任何错误

2 个答案: