hot reloading of mobx store not working; acting as a misleading guide for others to follow

[MichaelRFairhurst]

Hey, this just cost me a ton of time.

in domain-state.js, it looks like someone put in all the work required to get hot reloading working (the code is certainly very deliberate), with state serialization and restore on hot reload. However, it's only working by coincidence. I just spent a few hours going off of this example to try to get hot reload working of mobx stores working, and it was all a waste of time, so I am a bit irked.

Despite the very particular strategy in the code, it's doing nothing except preventing a full page reload with module.hot.accept(). If you remove all but these lines, you will see no difference in the code. This is the first proof.

Essentially what's happening is you get a new store in memory, but all the react components are still pointed to the old instance of the store. It looks like the state of the store is being serialized and used in the new code, but in reality, the new code is being ignored, so naturally the state is preserved.

I also have a second more elaborate proof. If you add some behavior to the store, like so (in domain-state.js)

extendObservable(store, { boxCount: function() { return store.boxes.length; } });

and then bind this into the view (canvas.js)

<div style={{color: 'red', position: 'absolute', zIndex: 10}}>{store.boxCount}</div>

and now we can see in red the number "2" when the page reloads. (you'll have to manually refresh, since hot reload isn't working...but that's not even the 2nd proof).

If you change the computed function, say, returning store.boxes.length * 2, then this change will have no effect via hot reload, it requires a full refresh. This is the real 2nd proof. This is exactly the type of change you would want to make in a store on the fly.

There are other guides on how to do hot reload, so probably best that you at least add a comment in domain-state.js that it is not working and should not be followed for the goal of getting hot reload on store js code working.

[steinso]

I have just come to the same conclusion, are there any guides or pointers to get mobx stores to hot reload?

[mweststrate]

@MichaelRFairhurst @steinso sorry, HMR in this example was originally intended to only accept changes on components, I didn't realize that the whole HMR didn't add anything to that :) I just pushed some changes to the index.js to allow changes on the domain-state file to be hot reloaded as well. The gist of it is to create an observable that holds the "current" store and replace that once needed. I hope that helps!

[zkaip]

If I change

store.boxes.push(
    new Box('Rotterdam', 100, 100),
    new Box('Viennas', 650, 300)
);

to

store.boxes.push(
    new Box('Rotterdams', 100, 100),
    new Box('Viennas', 650, 300)
);

the module hot reload doesn't work well, please check it @mweststrate , I guess the boxes changes can't be observed by store