react-redux 5.0.3 breaks hot-reloading

[BerndWessels]

Description

After updating from react-redux 5.0.2 to 5.0.3 hot reloading breaks the redux state.

Expected behavior

hot reloading should not break the redux state.

Actual behavior

with react-redux 5.0.3 the redux state breaks after a hot reload has happened.

Environment

react-hot-loader 3.0.0-beta.6

Reproducible Demo

Any project with react-hot-loader will do, just upgrade react-redux to 5.0.3 and experience the issue.

[markerikson]

Can you define "broken"? What is wrong? What errors are you seeing?

[BerndWessels]

with react-redux 5.0.2 the following works great:

• make a simple change in a components jsx like changing a label text
• wait until hot-reloading happened
• do stuff that causes actions that cause the state to update
• the new state is rendered just fine in all connected components

with react-redux 5.0.3 the same fails:

• make a simple change in a components jsx like changing a label text
• wait until hot-reloading happened
• do stuff that causes actions that cause the state to update
• the new state is NOT rendered by any connected component

It looks like after a hot-reload the components and the redux state are not properly connected anymore.

You can easily reproduce that by updating to react-redux 5.0.3 in your projects or use my repo https://github.com/BerndWessels/react-redux-rr4-wp2-rhl3.git

works fine with react-redux 5.0.2 but not with react-redux 5.0.3

[jimbolla]

Strange, since HMR was known to be broken in 5.0.2 and supposedly fixed in 5.0.3, but you're experiencing the opposite.

[basilfx]

I think I have a similar problem with 5.0.3. The problem resolved when going back to 5.0.2.

Unfortunately, I don't have a minimal example, but I did notice that if the Redux state changed, this piece of code is only executed for the <App /> component (my 'root' component, wrapped inside <AppContainer /> and <Provider />), and not its child components. If I go back to 5.0.2, then I see it is executed for all affected components.

Using the React developer tool (in Chrome), when I click a connected component that is not updating, running $r.subscription.onStateChange() in the console ($r refers to the component I clicked), I see the selector for the child component that should update is invoked.

I'll try to summarize this:

Connect(App)            <- $r.subscription.onStateChange() no effect on Child selector
  App
    Connect(Page)       <- $r.subscription.onStateChange() has affect on Child selector
      Page
        Connect(Child)
          Child

[jsonnull]

I'm having the same problem as described in one of the above comments: #636 (comment)

My yarn.lock is telling me I'm on react-redux 5.0.2 however, not 5.0.3.

EDIT: I tried 5.0.1 and it has the same issue.

EDIT EDIT: and 5.0.3.

[jsonnull]

I'm also able to perform the steps listed by @basilfx above to show how the ancestor connectAdvanced component's call to onStateChange() does not trigger an update to to the child component which should be updated.

[namxam]

Damn, just having the same issue. Unfortunately with both 5.0.2 and 5.0.3. Performing the steps suggested by @basilfx forces the update and the page renders correctly.

[markerikson]

Hmm. I've got a lot on my plate atm, but I will try to dig into this at some point in the near future.

As an alternative, you may want to consider using the "plain" HMR API, rather than react-hot-loader. Not quite as nice because you'd generally be swapping the entire component tree from the root and thus lose component state, but you'd still get the benefits of keeping what's in Redux state when the component tree is reloaded. I have an example of setting up component tree reloading in my post Practical Redux, Part 3: Project Planning and Setup.

[pmwisdom]

I'm also having the same problem, with both 5.0.2 and 5.0.3.

Edit: Going back to 4.4.6 fixed this for me.

[lisong]

me too! how to solve it

[rogersp]

Experiencing what I believe to be the same issue, with react-redux@5.0.5 and react-hot-loader@3.0.0-beta.7.

Put together a couple repro case based on react-hot-boilerplate@next, available here: https://github.com/rogersp/react-hot-boilerplate/tree/next.

Originally opened this issue in the react-hot-boilerplate repo, but this seems like a better place.

Reproducible Demo

git clone https://github.com/rogersp/react-hot-boilerplate.git --branch next
cd react-hot-boilerplate
npm install
npm start

Then:

• Open browser to http://localhost:3000
• Enter some text into form field, and watch the field update properly
• Click Trigger Request link, and watch the Inflight status change, landing on finished after 2 sec delay. Click link again to see the Inflight status go through the same cycle.
• Now change one of the heading texts in any of the components and save the file to trigger a hot reload, and see the page content update properly.
• Now try to change the form field text, or click the Trigger Request link. Neither component updates, but redux actions are being dispatched properly.

There is a note in src/App.js in the demo code, but if I change the shape of the props passed to the App component from a primitive to an object, the Trigger Request feature works properly, even after hot reload. I am baffled as to why this is the case.

[zbennett10]

Just got this fixed for me by downgrading react-redux from v5.0.3 to v5.0.2.

[ZeeStorm]

We already knew downgrading to 5.0.2 fixed the problem (and some having to go back to 4.x). Why would that close this issue? The bug is that we still can't use 5.0.3 (and up to current 5.0.5).

[markerikson]

@ZeeStorm : see #715 , which should resolve this issue.

[ZeeStorm]

@markerikson my apologizes, the link in the email took me to the above comment, which I had missed the PR #. Thank you and sorry again.

[rogersp]

Can confirm this partially fixes my repro case.

I now have a different issue with the included redux-form component, however that may be isolated to redux-form. After a hot reload, form fields are now updating properly, but the form state is lost.

[ZeeStorm]

@rogersp that same behavior on redux-form exists in react-redux 4.4.x as well. I believe it's due to the "attach/detach" actions that redux-form performs when a component is reloaded.

[rogersp]

Agreed. Appears to be an issue with react-redux.

Most recent issue and workaround here: redux-form/redux-form#3005

Thanks for the fix!

[olegstepura]

This seem to have been fixed with release 5.0.6 which has #715 merged

[gaoxiaoliangz]

5.0.6 works, but still has some issues. If I modify a text label in a connected component it sometimes triggers hmr update and sometimes doesn't, kinda weird. And if I do not use connect, the issue goes away.

[larsnystrom]

I had to update to react-hot-loader@4.0.0-rc.0 (yarn add react-hot-loader@next) to make hot reloading components work with react-redux@5.0.6.