Support for fast refresh

[msutkowski]

This is a general redux problem, but it'd be great if data didn't drop out when working in an environment with fast refresh/HMR. I've seen quite a few different approaches to this, but we should probably recommend something here.

A few ideas:

1. redux-persist
2. something along the lines of: https://github.com/GuillaumeCisco/redux-reducers-injector
3. a naive but okay approach: denniske/rnReduxhooks@c2a0279

Definitely open to suggestions here. I imagine this would apply to RTK as well.

[phryneas]

At least with HMR, I don't think it would drop out if you configure it correctly? I haven't seen how this is done with Fast Refresh though tbh.

[markerikson]

I'm confused. Why does Fast Refresh relate to this at all? The only thing I can think of is that you might be defining the store right with a root component or something.

I know that in my current app, which has an app/store.ts file, the data stays just fine when a component gets refreshed.

[msutkowski]

@markerikson I need to do some more research here, but for example, my rtkq data drops on hot reloads on the app I work on full-time currently. This is while using esbuild though, so it might be something there - but that being said, the rest of the state seems to be fine as auth sticks around and such. I'll have time to debug tomorrow most likely and will update here.

[markerikson]

well, if you're using ESBuild by itself, you're almost definitely not using the actual "Fast Refresh" (the new hot reloading system built into React itself), because that requires bundler integration. There's a Webpack + Fast Refresh plugin, and both CRA and Next are using it.

If you're using CRA + an override + esbuild-loader with Webpack....

I dunno :)

[msutkowski]

Correct - craco + craco-esbuild + esbuild-jest etc etc etc. I've gone down the wrong 🐰 🕳️

[vaqif14]

redux-injector is good too
https://github.com/react-boilerplate/redux-injectors