search

rtk-incubator / rtk-query

Data fetching and caching addon for Redux Toolkit
https://redux-toolkit.js.org/rtk-query/overview
MIT License
626 stars 31 forks source link

Support for fast refresh #164

Closed msutkowski closed 3 years ago

msutkowski commented 3 years ago

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: https://github.com/denniske/rnReduxhooks/commit/c2a0279927bf7c32b5f2507905ad146cff742770

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

phryneas commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

Correct - craco + craco-esbuild + esbuild-jest etc etc etc. I've gone down the wrong :rabbit: :hole:

vaqif14 commented 3 years ago

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