如何将推送方法从 redux-router 添加到操作

Question

我正在尝试在操作中添加 redux-router 中的 push 方法。当我启动操作时，推送接收有效负载中的对象，但不要更改页面。 enter image description here

actions/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

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

export const actions = {};

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

并在您的组件中将其命名为 actions.goTo('staff', push)。

Answer 2

您编写中间件时可能出错。

注意：Router中间件应该跟在Logger中间件之后。

喜欢这个：

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

如何将推送方法从 redux-router 添加到操作

How to add push method from redux-router to actions

javascript

reactjs

redux

redux-router