Component no longer updating with react-redux 6.0.0

[mjhoffm2]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

The current behavior is that my react component is not getting updated after I update the redux store. In fact, mapStateToProps is not getting called except for the initial mount.

Here is a fairly minimal repo I set up that reproduces the issue: https://github.com/mjhoffm2/react-demo/tree/react-redux-bug-demo/node

In this demo, the ChannelList component dispatches a LOAD_CHANNELS action when it mounts, which updates channels in the redux store. However, mapStateToProps doesn't get called a second time. I need to force my component to remount by changing the key from the parent to see the updated data.

What is the expected behavior?

The expected behavior is that my component will be updated when the redux store is updated. This works as intended if I switch to using react-redux 5.1.1, but does not work when I use version 6.0.0. Even if I call this.forceUpdate(); in my component, it does not get the new data from the redux store.

Which versions of Redux, and which browser and OS are affected by this issue? Did this work in previous versions of Redux?

I am using Redux 4.0.0 and Google Chrome. I have not tested previous versions of Redux, but this has worked with previous versions of React-Redux.

[markerikson]

Hmm. Code seems reasonable at first glance. I'll try to take a look at this over the next day or two.

[maximusnikulin]

Same here

[AgentCoop]

Same thing. The root component completely ignores updates of Redux store. The re-rendering happens only on changes by connected-react-router @@router/LOCATION_CHANGE. So that I have to click twice on a link for a page to be rendered.

In my case I have a root component connected to the store and a child one connected to the store as well. I guess the problem somehow related to the new React context API that react-redux is now using.

If new API will lead to that there will be no more a possibility for nested connected components, that is definitely a bad news.

[markerikson]

@AgentCoop: please provide a sample project that demonstrates the issue.

[mjhoffm2]

I made a demo for the bug that I think @AgentCoop is talking about: https://github.com/mjhoffm2/react-demo/tree/react-redux-bug-demo-2/node

If you run the code in this branch, you can open your browser directly to http://localhost:3000/channels/1/view and you should see the channel list stuck in "loading...". However, if you click the close link or the close button, that will dispatch a route change action through connected-react-router which will cause the channel list to update.

[markerikson]

Huh. I'm looking at this, and I'm pretty confused.

Provider is clearly detecting that the state changed between first render and mount, and calling this.setState({storeState : postMountStoreState}). It then re-renders.

But... the context consumer render callbacks in the connected components aren't firing at all when that re-render happens.

checking..

AHA!

You have mismatched versions of react and react-dom. You're using [email protected], but [email protected].

If I update both to react@latest react-dom@latest, then it works correctly.

ALWAYS KEEP YOUR REACT VERSIONS IN SYNC! Bad things will happen if you don't :)

[mjhoffm2]

Thanks a ton, I knew it had to be something simple that I overlooked. I wish React printed a warning in the console if there is a version mismatch.

[markerikson]

Agreed. Probably worth filing an issue over there to ask for it.

[lagoasoft-lucasschmidt]

You are a god @markerikson ... my issue was in a mono repository of both react and native. React web app working fine, then I tried to apply redux in a new native app, not working, same problem as stated above ... for some reason, the repo was updated with latest React version, but the native version was asking for another version 😆

I even tried subscribing the store, working fine ... I couldnt understand what was going on ...

After a few hours and lots of interwebz searching, I found your answer, thanks a lot dude!

[pgonzalez-santiago]

Hey, I had the same problem mapStateToProps doesn't get called a second time on production mode with Expo. This start happening to me with SDK33 having the correct versions of React and React-dom the problem was Redux-connect. I updated the dependency and now it is working :)