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