State lost on Hot Reloading with Create-React-App

[aaronplanell]

Hello,

I have detected a problem. The state is lost on Hot Reloading with Create-React-App. For instance:

Step 1:

• Download and execute the redux todo example:

git clone https://github.com/reactjs/redux.git
cd redux/examples/todo
npm install
npm start

Step 2:

• Open http://localhost:3000/
• Insert a Todo

Step 3:

• Edit redux/examples/todos/src/components/Footer.js
• Change 'All' (line 9) for 'All items'
• Save

The state will be loss.

For more information: aaronplanell/todolist-react-redux-wcra#1

[gaearon]

This is not a problem, it’s intentional.
Create React App doesn’t currently support hot reloading for components.

[aaronplanell]

😨 But Redux was created for hot reloading and time travelling (as you know, because you are the creator 😄 ). It's very useful (and a great idea!) because sometimes you need to have information in the state for manipulating the UI. Any solution? I love hot reloading and I love too create-react-app 😞

[gaearon]

But Redux was created for hot reloading and time travelling (as you know, because you are the creator)

Right, but then it got crazy popular, and hot reloading was still somewhat flaky, and people blamed React and Redux for their broken complicated project configurations 😉 . I’d rather not ship an experimental feature here if people get an impression that it’s stable and then become disappointed.

Any solution?

Sure, you can use module.hot.accept like described here. This won’t preserve local state of React components or DOM, but will preserve Redux state.

[aaronplanell]

Thanks a lot @gaearon !!! I will check it tomorrow and I will update my project.
And thanks too to @sheepsteak for his article 👍

[indiesquidge]

@aaronplanell, there is a great video by ReactCasts that shows how to get HMR working. It shows the same method to get Redux state preserved (as shown in the above linked article), and also how to set it up in a way that will preserve component state and DOM. (Note however, that the latter requires Webpack changes, so an ejection from create-react-app is unfortunately required.)

[markerikson]

@indiesquidge , @aaronplanell : yeah, you actually use HMR without ejecting from CRA, you just need to use the "plain" HMR API rather than using React-Hot-Loader. I've got an example of that in my blog post at http://blog.isquaredsoftware.com/2016/11/practical-redux-part-3-project-planning-and-setup/ , and I have a bunch of other articles on HMR listed at https://github.com/markerikson/react-redux-links/blob/master/webpack-advanced-techniques.md#hot-module-replacement that might help explain what's going on.

[aaronplanell]

Thanks a lot both of you, @indiesquidge & @markerikson!!!

I fixed it in september with a few lines:

if (module.hot && process.env.NODE_ENV==="development") {
  module.hot.accept();
  const NextApp = require('./components/App').default;
  ReactDOM.render(
    <Provider store={store}>
      <LocaleProvider locale={caES}>
        <NextApp loadMetadata={false}/>
      </LocaleProvider>
    </Provider>,
    document.getElementById('root')
  );
}

Nevertheless, I will check all your links in my next Hackaton, hehehe.

Best regards from Barcelona!

PS: LocaleProvider is library of Ant Design and must be removed if you don't use it.