Giter VIP home page Giter VIP logo

Comments (5)

dvdzkwsk avatar dvdzkwsk commented on April 19, 2024

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.

from react-redux-starter-kit.

gaearon avatar gaearon commented on April 19, 2024

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.

from react-redux-starter-kit.

dvdzkwsk avatar dvdzkwsk commented on April 19, 2024

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

from react-redux-starter-kit.

dvdzkwsk avatar dvdzkwsk commented on April 19, 2024

@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.

from react-redux-starter-kit.

LarryEitel avatar LarryEitel commented on April 19, 2024

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

from react-redux-starter-kit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.