Store and hot reloading

[magalhini]

Hey there bruz,

Thanks for the great boilerplate here, so far the most interesting (and easiest) place to start digging into RR + Redux from scratch I've seen 👍

I was wondering if you had any ideas on how to fix the issue of hot-reloading the app, which currently crashes the Simulator every time with:

<Provider> does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

I'm aware of the root cause of the error and I've seen the other reports showing how to fix it (see this issue ) but so far, no luck in getting this fixed... any clues how we'd change your boilerplate?

I've tried adding the following to the configureStore but to no avail:

if (module.hot) {
        module.hot.accept(() => {
            const nextRootReducer = require('../reducers').default;
            store.replaceReducer(nextRootReducer);
        });
    }

Still crashes on every file save, when Hot Reloading is enabled? Any tips? :)

[bruz]

Interestingly, when I tried enabling hot reloading I got a different error when trying to make a change in Groceries.js:

Firebase App named '[DEFAULT]' already exists

Based on #15 I already had plans to break Firebase out of the React component, so I went ahead and did that to see if it'd help: 55b145f. It also adds essentially the same hot reload handler for the reducers that you show.

Now I get hot module reloading for the Groceries component and the reducer files, which is an improvement, but the actions, store files, App.js or index.(ios|android).js all still hit that Firebase error.

[WoodyPhil]

@bruz thanks for sharing your good work with us. Are there some updates about this topic?

[bruz]

@WoodyPhil I took another look at this but wasn't able to find a way around the issue with Firebase. Based on vercel/next.js#1999 (comment) I tried to add a check so that initializeApp would only get called once and it would use an existing app instance if it was already defined, but couldn't get it working.

I suspect there may be a way to do it through the hot reloading API with module.hot.accept or something like that, but I don't know hot reloading very well so maybe someone else will know how to approach this better.