How to add push method from redux-router to actions

Question

I'm trying to add push method from redux-router in actions. When I init action, push receiving an object in payload, but don`t change the page. enter image description here

actions/index.js

import { push } from 'redux-router';

export const actions = {};

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

But if I init push not from the action, but straight in the component it works right.

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

So, push() may only work from inside a connected component. If you want to use it from your actions/index.js file, you can pass it along as a param and call it there, without having to import it. You can have something like:

export const actions = {};

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

and call it as actions.goTo('staff', push) from your component.

Answer 2

Probably error while you compose your middlewares.

Note: Router middleware should follow after Logger middleware.

Like this one:

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