Action not dispatching when using Push from React-Router-Redux even withRouter fix

Question

When using the latest version of React-Router-Redux with the latest version of React-Router-Dom and React-Router, the Push dispatch does not work in particular situations. Here are the details:

Versions: "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", react-router "^4.2.0", "react-router-redux": "^5.0.0-alpha.9",

Steps to reproduce: Setup code as per the examples in the React-Router-Redux version 5 repo. Wrapped connect with withRouter as specified in : https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

Expected Behavior Dispatch an action and change the url of the page when a push action is dispatched from a component.

Actual Behavior Url is changed but no action is seen to be dispatched in redux-logger. Action dispatches properly when url is changed manually and set in url bar or navigating using the navigation bar on web site.

Any insights would be appreciated.

I'd suggest to create an issue on react-router-redux's github page, they might be more familiar with the tutorial's code. I had the case that actions dispatched right after a dispatch(push(...)) were swallowed somehow and don't show up in the logger as well. — timotgl
– timotgl, Commented Mar 2, 2018 at 20:10
thanks @timotgl I did post on the github page but was told it was not an issue and I need to post on stackoverflow :( github.com/ReactTraining/react-router/issues/5987 — AmyScript
– AmyScript, Commented Mar 2, 2018 at 20:48

AmyScript · Accepted Answer · 2018-03-02 21:37:13Z

2

I figured out the issue with this bug. The issue is you have to define the history used in the store and the history used in <ConnectedRouter history={history}> in the same component. So if you define your store in another component other then the component you define ConnectedRouter, you have to pass in the history used in the ConnectedRouter component into your store component.

I am guessing history is slightly different depending on which component you define it in so it was causing syncing issues with the Router.

answered Mar 2, 2018 at 21:37

AmyScript

313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

timotgl Over a year ago

Ok glad you solved it. The history is best kept in one module and treated as a singleton that you import in the comonents that need it.

Collectives™ on Stack Overflow

Action not dispatching when using Push from React-Router-Redux even withRouter fix

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related