Why is routing not working due to action in React-Redux?

Question

React

Good afternoon, in the React application, I have an onLoad event hanging, which takes the width and height of the parent and divides by a constant value and is dispatched to the storage through the action.
And because of this, routing does not work. What can be wrong?
Component
Action
Reducer

And why do you need to write an action if you can directly call the dispatcher without intermediaries?

Answer 1

And because of this, routing does not work.

What exactly is not clear? Why write a function? Or why not manually import store into each component?
First, don't repeat yourself. Secondly, now the components do not know anything about the store and its storage location, otherwise they will. But no one bothers you to do as you please.
redundant design:

dispatch => ({
  onSetScale: (event) => {
    dispatch(setScale(event);
  }
})

Can be shortened to:

{
  onSetScale: setScale,
}

I don't pass actions via connect, but call like this:

componentDidMount() {
  this.props.dispatch(action());
}

The advantage of this solution is that you can quickly jump to the place where the action is declared. In large projects, this saves a lot of time.