flux-hot-reload? about react-hot-loader HOT 12 CLOSED

It's definitely possible and you're right it fits Flux well.

Without any work, hot reload often works for most modules except Stores, just because updates bubble up to component level, and updated components work with new module references.

It would indeed be fascinating to:

1. Definitely test where with Flux updates work as is (I presume action creators and utilities should work)
2. Find a way to recycle Stores (what you suggested seems reasonable)

from react-hot-loader.

Did a small proof of concept:

https://github.com/ronag/fluxit

'use strict';

var fluxit = require('fluxit');

class TimelineStore extends fluxit.Store {

  constructor(prevState) {
    super(prevState);
  }

  handlePayload(payload) {

  }

}

var stores = window.__Fluxit_Stores__ || (window.__Fluxit_Stores__ = {});
module.exports = stores['TimelineStore'] = new TimelineStore(stores['TimelineStore']);

Any ideas as to how make this better? The __Fluxit_Stores__ stuff would be added by a loader.

from react-hot-loader.

Is there a reason you're not using Webpack HMR API directly (module.hot)?

On 21 Sep 2014, at 23:56, Robert Nagy [email protected] wrote:

Did a small proof of concept:

https://github.com/ronag/fluxit

'use strict';

var fluxit = require('fluxit');

class TimelineStore extends fluxit.Store {

reset(prevState) {
console.log("2");
}

handlePayload(payload) {

}

}

if (!window.Fluxit_Stores) {
window.Fluxit_Stores = {};
}

var prevState = window.Fluxit_Stores['TimelineStore'];
var newState = window.Fluxit_Stores['TimelineStore'] = new TimelineStore();

if (prevState) {
newState.reset(prevState);
}

module.exports = newState;
Any ideas as to how make this better? The Fluxit_Stores stuff would go into a loader.

—
Reply to this email directly or view it on GitHub.

from react-hot-loader.

@gaearon: No, there is no reason other than I'm just trying things out and it's quicker this way. Once it works it would be refactored out in a loader + HMR API.

from react-hot-loader.

I'm probably I bit in over my head here since I don't fully understand how modules are loaded and updated.

from react-hot-loader.

Any update since then? My store/s get hot-reloaded but the Problem is that the old store is still there and still registered to the dispatcher callbacks... so after a hot-reload both stores (new and old version) react on the actions. I have some hacky ways in mind to solve it - but :-)

Is there any non-hacky way already?

from react-hot-loader.

I plan to take a look at this ~ in a month.

from react-hot-loader.

I have some progress. This is very sketchy at the moment, not on NPM and can work only with FB's vanilla Flux (Facebook's flux dispatcher and EventEmitter stores):

https://github.com/gaearon/flux-hot-loader

If you feel like giving it a try, put this in node_modules manually and add something like this next to react-hot in Webpack config:

{ test: /\.jsx?$/, loader: 'flux-hot?dispatcher=../dispatcher/AppDispatcher', include: /scripts\/stores/ }

where include is regexp for directory with your Flux Stores and dispatcher is path to the global dispatcher from any file in that directory.

One hard condition right now is that each Store must have a property called dispatchToken that is equal to AppDispatcher.register return value.

from react-hot-loader.

Note: it's quite possible that this only works in Manual mode (react-hot?manual). I haven't even documented the manual mode yet because I'm waiting for React Router 0.12 with router.replaceRoutes to be released :-)

from react-hot-loader.

Looks promising! I doubt that it will work with ES6 modules, though — the 6to5 loader we're using happens to export definitions such as export default MyDispatcher; to module.exports.default and the stores which are exported in our app use the same export default MyStore; syntax.

I'm not fully aware how other ES6 transpilers/loaders/what have you set variables to CommonJS module.exports, but I'd suppose it won't be such a big leap to support finding exports from module.exports and module.exports.default should it be available.

If I export ES6 6to5 modules via export var MyVariable or something else besides the export default Foo, they will get properly assigned to module.exports.MyVariable, but I would not want to change our code base to use that syntax, as importing defaults are far superior to importing with a named object.

I could give it a try with our setup if it would support these things.

from react-hot-loader.

Thanks for the tip, I'll add support for default.

from react-hot-loader.

I'm going to go with a different solution to this. It's more fundamentally solid.
I'm closing this issue for now, but expect to see something working in a month or two!

from react-hot-loader.