如何将redux-路由器的push方法添加到操作中

Question

我试图将push方法从redux-router添加到实际操作中。当我开始操作时，按下有效载荷中的接收对象，但不更改页面。在这里输入图像描述

行动/index.js

​

import { push } from 'redux-router';

export const actions = {};

actions.goTo = () => {
    return (dispatch) => {
        dispatch(push('/staff'));
    };
};

​

但是，如果我插入的push不是来自动作，而是直接在组件中，它工作正常。

MyComponent/index.js

​

import { push } from 'redux-router';
import { connect } from 'react-redux';

@connect((state) => ({}))
export default class MyComponent extends Component {

constructor (props) {
        super(props);
        this._goTo = ::this._goTo;
    }
    
_goTo (event) {
        event.preventDefault();
        const { dispatch } = this.props;
        dispatch(push('/staff'));
    }
    
    render () {
        return (
            <section>
              <button onClick = { this._goTo }>from component</button>
            </section>
        );
    }
}

​

Answer 1

可能是在编写中间件时出错了。

注意：路由器中间件应该紧跟在Logger中间件之后。

就像这个：

compose(
    applyMiddleware(...middleware),
    reduxReactRouter({ createHistory })
);

Answer 2

因此，push()只能在连接的组件内部工作。如果您想从您的actions/index.js文件中使用它，您可以将它作为param传递并在那里调用，而不必导入它。你可以拥有这样的东西：

export const actions = {};

actions.goTo = (route, push) => {
    return () => {
        push(`/${route}`);
    };
};

并从您的组件中调用它为actions.goTo('staff', push)。