Exported variable 'store' has or is using name '$CombinedState' from external module error Redux toolkit and redux persist

Question

Hi I'm trying to get redux persist working with redux toolkit (also in typescript) I'm getting the following error:

Exported variable 'store' has or is using name '$CombinedState' from external module "home/..../node_modules/redux/index" but cannot be named.

I see this question is asked before here, but it's not answered as well.

following is my code, please let me know if you have an idea on how to fix this, thanks

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import {combineReducers} from 'redux';
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import myModuleReducer from "../../modules/my-module/redux/my-module-slice";
import myModuleTwoReducer from "../../modules/my-module-two/redux/my-module-two-slice";

import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

const persistConfig = {
  key: 'root',
  storage,
}

const rootReducer = combineReducers({
    myModule: myModuleReducer,
    myModuleTwo: myModuleTwoReducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
})

export default store;
export const persistor = persistStore(store)


export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Answer 1

I had the same issue, and here's what I figured out:

You need to include Store from redux, and use it as your type definition for your own store return value. Short answer:

import {combineReducers, Store} from 'redux';
[...]
const store:Store = configureStore([...])
[...]
export default store;

Longer answer:

As I understand it, what was happening is that Store type uses $CombinedState as part of its definition. When configureStore() returns, it inherits the State type. However since State is not explicitly used in your code, that now means that your code includes a value that references $CombinedState, despite it not existing anywhere in your code either. When you then try to export it out of your module, you're exporting a value with a type that doesn't exist within your module, and so you get an error.

You can import State from redux (which will in turn explicity cause your code to bring in $CombinedState), then use it to explicitly define store that gets assigned the return of configureStore(). You should then no longer be exporting unknown named types.

You can also be more specific with your Store type, as it is a generic:

const store:Store<RootState>

Although I'm not entirely sure if that would be a circular dependency, since your RootState depends on store.

Answer 2

A potential solution would be to extend the RootState type to include $CombinedState as follows:

import { $CombinedState } from '@reduxjs/toolkit';

export type RootState = ReturnType<typeof store.getState> & {
  readonly [$CombinedState]?: undefined;
};