I'm submitting a...
[X] Feature request
What is the current behavior?
In the React+Redux world, when hot module replacement is active and a change is made to source code and saved, the code is replaced, but the state is retained. That is, if you had a counter on a page, and it was set to 1, and you incremented it, it would now be 2. When you save the code, the code recompiles, but the value will remain at 2, and you can continue where you left off.
Without this, the application state is reset after every save.
It achieves the retaining of state by getting an instance of the state just before the app instance is destroyed, destroying the old instance, then creating a new instance of the app, then reattaching the state to the new instance.
At the moment, there does not appear to be any guidance on how to achieve this, so when the application is reloaded, the state will revert to its initial state, in this case 1.
This feature is something that React people claim makes them more productive.
Expected behavior:
Someone had an attempt to achieve this in Angular here but it does not seem to be maintained anymore. You can see from the image on that page what the expected behaviour should be.
tonywr71
All 12 comments
https://github.com/gdi2290/angular-hmr look here.
I was planning to write about this on Medium and maybe if I got it simple enough then make a documentation pull request in the wiki but haven't had time yet.
MattiJarvinen
on 3 Dec 2017
I've had a play with that but have been unable to get it working so far.
Unfortunately, the link to the sample app is no longer working.
On 4 Dec 2017 6:22 AM, "Matti Järvinen" notifications@github.com wrote:
https://github.com/gdi2290/angular-hmr look here.
I was planning to write about this on Medium and maybe if I got it simple
enough then make a documentation pull request in the wiki but haven't had
time yet.—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ngrx/platform/issues/625#issuecomment-348807190, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ALoUd-AuKGPtBX-vxiUFOfQ2rcF69dtxks5s8vUKgaJpZM4QznZn
.
tonywr71
on 3 Dec 2017
fyi, there appears to be an angular starter that includes hot module replacement from the same people that produced the original hot module replacement for angular. That can be found here. I haven't got anywhere with it yet, though.
tonywr71
on 6 Dec 2017
Look here for guidance on setting up HMR. I currently use it and the same applies here as it does in electron, nothing special.
https://github.com/colinskow/angular-electron-dream-starter/blob/master/src/app/app.module.ts
Kaffiend
on 21 Dec 2017
We don't plan on supporting HMR directly in NgRx. It is not one of the goals of the library and it is hard to imagine how we could make it work well with things like Effects.
MikeRyanDev
on 4 Feb 2018
I dont see how Effects would have any bearing on HMR, you save the current state, reload the module, and inject the state back in with the code change. Until you fire off another action an effect couldnt be hit until the HMR process is done already...unless i'm missing something. That has been my experience thus far and is by far to most pleasurable workflow i've dealt with.
Kaffiend
on 5 Feb 2018
I completely agree with @Kaffiend. I kind of thought HMR was (or at least has become) one of the major selling points of Redux. Having state persist through hot reloads is certainly touted as a huge, huge deal in ClojureScript, Elm, Fable, etc.
The best explanations I've seen explanation and demo I've seen on the subject: https://www.youtube.com/watch?v=j-kj2qwJa_E
Same thing in Elm:
https://www.youtube.com/watch?v=zHPtvw8c3Lc
And in Fable:
https://raw.githubusercontent.com/fable-elmish/hmr/master/docs/files/img/hmr_demo.gif
If the answer is, "Build it yourself", that is absolutely fine and expected. I'm just somewhat confused, as I really thought HMR _was_ a goal of the library.
d4hines
on 23 Apr 2018
@Kaffiend & @d4hines just go and use https://github.com/gdi2290/angular-hmr read the readme and you're set. NGRX 4.x version works just fine.
MattiJarvinen
on 25 Apr 2018
@MattiJarvinen-BA , thanks. I saw that and got it working yesterday, and am quite excited. The code listed in the readme didn't persist state through the reload, but I eventually figured it out. StoreDevTools seems to create a new instance on each reload though. Besides the memory issues this will create after a few hundred saves (resulting in a few hundred instances), the history doesn't carry over between instances, which isn't very useful. There's got to be some magic one can do to instantiate the StoreDevTools separately and inject the same instance into the app though. Does anyone have any suggestions on this front?
d4hines
on 25 Apr 2018
@d4hines can you send here how did u get it working ? Thank you
montella1507
on 11 Jun 2018
@montella1507, sorry for the delay. I'll try to get the code up here by tonight.
d4hines
on 15 Jun 2018
@d4hines hello, no needed anymore:
https://medium.com/@marianbenat/angular-6-hmr-ngrx-store-240024cad2f6
thx you anyway
montella1507
on 15 Jun 2018
Related issues
brandonroberts
·
3Comments
sandangel
·
3Comments
dollyshah-02-zz
·
3Comments
bhaidar
·
3Comments
brandonroberts
·
3Comments
Most helpful comment
I dont see how Effects would have any bearing on HMR, you save the current state, reload the module, and inject the state back in with the code change. Until you fire off another action an effect couldnt be hit until the HMR process is done already...unless i'm missing something. That has been my experience thus far and is by far to most pleasurable workflow i've dealt with.