Next.JS + Hot Module Reload

[jd-carroll]

I am building an app with Next.JS (v13.3 using legacy pages model) and @reduxjs/toolkit (v 1.9.3).

When I run in development mode, every change I make on the client (triggering a hot module reload HMR) causes my store to revert back to initial state. I thought reduxjs/toolkit would preserve the store state across HMR, what am I missing?

Here is generally how my store looks:

export const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NEXT_PUBLIC_ENABLE_REDUX_DEV_TOOLS === 'true',
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware).concat(logger, api.middleware)
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export type AppThunk<R = void> = ThunkAction<R, RootState, unknown, AnyAction>;
export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;
export const useDispatch = () => useReduxDispatch<AppDispatch>();

I found next-redux-wrapper but that seems to require the use of createStore instead of configureStore. I'd rather find a way to stick with configureStore as that seems to be best practice.

Confident that it is some configuration piece I am missing, can someone help point me to the err of my ways?
(Happy to provide more details if necessary)

[markerikson]

Hmm. First note is that next-redux-wrapper should work fine with configureStore. They're both creating a Redux store in the end.

Second, where and how are you importing this file? At what component/page level?

Also, is SSR (in the form of getServerSideProps or the other similar APIs) involved?

[jd-carroll]

SSR is not involved (not using any of getServerSideProps / getInitialProps)

I think I have it narrowed down a little (but still very lost):

• If I make a change in a page component, HMR works as expected and state is preserved
• If I make a change in the custom baseQuery I have for my api slice (RTK Query), the state is lost

Here is the api slice:

export const api = createApi({
  reducerPath: 'api',
  baseQuery: myBaseQuery({ baseUrl }),
  tagTypes: [],
  endpoints: (build) => ({})
})

For reference, the base query used is essentially the axios base query example with the addition of some encryption (all payloads are encrypted)

[phryneas]

If you modify a file that is required for your configureStore call, the file with your configureStore call will also reload - creating a new store. You can play around that with module.hot.accept and store.replaceReducers, but in the long run it's usually not worth doing do, as you probably won't be touching those files a lot, compared to your component files.