Cleanup hook to improve HMR workflow

[ryaninvents]

When using redux-bundler in a hot-reload environment, the Redux DevTools show a store instance for every hot-reload since I last refreshed the page. When the APP_IDLE event fires, it often pops an old store instance in front of the "live" or most recent one.

Currently, I'm using this code to handle store updates while hanging on to my Redux state:

if (module.hot) {
  module.hot.accept('../src/createStore', () => {
    const oldState = store.getState()
    const nextCreateStore = require('../src/createStore').default
    store = nextCreateStore(oldState)
  })
}

What I'd like to be able to do is call a method such as store.destroy() so that everything gets cleaned up. If the store had an EventEmitter attached to it, developers would be able to hook into it in the init function and perform any required cleanup. If this were implemented, then I'd make a PR into the Redux DevTools repo to check for this EventEmitter and remove old store instances once they've announced their destruction.

I'd be glad to submit a PR if this feature proposal is accepted.

[HenrikJoreteg]

Hey Ryan! Just to make sure I understand you, are you saying you'd like the store itself to be an event emitter? So you mean you could do something like store.addEventistener('destroyed').

If that's what you mean, to me that feels a bit excessively complex. I'm not sure I want to add that for everybody just to support this use case. Feel free to re-open this if i misunderstood or if you think there's a strong case for this. Thanks, though!

[ryaninvents]

I had pictured the event emitter as being a property of the store (rather than the store itself) so that the change would be more isolated. However, I do recognize that this is a limited use case, and I agree with you that it's difficult to justify.

Thanks for considering 😄