Skip to content
This repository has been archived by the owner on Sep 11, 2018. It is now read-only.

Does hot-reloading mean browser reload? #50

Closed
LarryEitel opened this issue Sep 2, 2015 · 5 comments
Closed

Does hot-reloading mean browser reload? #50

LarryEitel opened this issue Sep 2, 2015 · 5 comments
Labels

Comments

@LarryEitel
Copy link

I have been cutting my teeth on a variety of reactjs examples. I have successfully installed and can run this project on Windows! :) However when I update the line Welcome to the React Redux Starter Kit! and save the file. Console shows module reloaded however, I have to reload the page to see the change. Is this normal? I have seen other projects where the change refreshed without reloading the page.

@dvdzkwsk
Copy link
Owner

dvdzkwsk commented Sep 2, 2015

So it's actually an interesting scenario that you've encountered, and it may be a bit counterintuitive at first. The starter kit does work with hot-reloading (views, stores, styles, etc.), however that line "Welcome to the React Redux Starter Kit" is simply the initial state of a reducer. So when you update the reducer file, the reducer function gets hot reloaded but the state within the app doesn't reset (and therefore doesn't reload the initial state, which is what you modified).

If you wanted to verify that hot reloading works, you could go to home view and edit something in the render function. For example, change:

<h1 className='text-center'>
  {this.props.sampleStore.message}
</h1>

to

<h1 className='text-center'>
  {this.props.sampleStore.message} TEST
</h1>

And you should see the view get hot reloaded. The only reason I put the message in the store was to demonstrate connecting to the store, but I'm now realizing that it's somewhat unclear. Also, I'm not sure if you're using the latest version of the starter kit, but if you are you'll notice the sample reducer has a handler:

  [SAMPLE_ACTION] : (state, payload) => {
    console.log('sample action received.'); // eslint-disable-line

    // noop
    return state;
  }

Which is there to demonstrate the hot reloading of a reducer; you could change what is logged in that console.log statement, save the file, and the next time the action occurs the handler will be updated.

Hopefully that clears things up, if not just let me know.

@gaearon
Copy link
Contributor

gaearon commented Sep 2, 2015

So it's actually an interesting scenario that you've encountered, and it may be a bit counterintuitive at first. The starter kit does work with hot-reloading (views, stores, styles, etc.), however that line "Welcome to the React Redux Starter Kit" is simply the initial state of a reducer. So when you update the reducer file, the reducer function gets hot reloaded but the state within the app doesn't reset (and therefore doesn't reload the initial state, which is what you modified).

The initial state should be re-evaluated with Redux DevTools enabled.

@dvdzkwsk
Copy link
Owner

dvdzkwsk commented Sep 2, 2015

@gaearon Interesting, didn't know that. Thanks.

@dvdzkwsk
Copy link
Owner

dvdzkwsk commented Sep 2, 2015

@LarryEitel In case you were using the very latest of the starter kit, I accidentally removed react-hot-loader with a recent refactor... it doesn't sound like this affected you, but it's fixed now just in case.

Also I just updated the example in the starter kit to be a bit more clear in this regard.

@LarryEitel
Copy link
Author

Yes, it was the latest. Thank you for explaining the behavior. :)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants