导出的变量“store”已经或正在使用来自外部模块错误 Redux toolkit 和 redux 的名称“$CombinedState”答案

【问题标题】：Exported variable 'store' has or is using name '$CombinedState' from external module error Redux toolkit and redux persist导出的变量“store”已经或正在使用来自外部模块错误 Redux toolkit 和 redux 的名称“$CombinedState”
【发布时间】：2021-04-28 04:53:01
【问题描述】：

您好，我正在尝试让 redux 坚持使用 redux 工具包（也在 typescript 中）我收到以下错误：

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

我看到在here 之前有人问过这个问题，但也没有人回答。

以下是我的代码，如果您知道如何解决此问题，请告诉我，谢谢

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;

【问题讨论】：

你试过在tsconfig.json中将“strict”改为false
嗯，试过了，没用，如果我将declaration 设置为 false 它确实可以构建，但问题是我需要声明，因为这是一个子模块，但是现在有点作品

标签： reactjs typescript redux redux-toolkit

【解决方案1】：

我遇到了同样的问题，这是我想出来的：

您需要包含来自 redux 的 Store，并将其用作您自己的 store 返回值的类型定义。简短回答：

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

更长的答案：

据我了解，发生的事情是 Store 类型使用 $CombinedState 作为其定义的一部分。当configureStore() 返回时，它继承State 类型。但是，由于 State 未在您的代码中显式使用，这意味着您的代码现在包含一个引用 $CombinedState 的值，尽管它也不存在于您的代码中的任何位置。然后，当您尝试将其导出到模块外时，您导出的值的类型在您的模块中不存在，因此会出现错误。

您可以从 redux 导入 State（这反过来会显式地导致您的代码引入 $CombinedState），然后使用它来显式定义 store，并分配 configureStore() 的返回值。然后，您应该不再导出未知的命名类型。

您还可以更具体地使用您的 Store 类型，因为它是通用类型：

const store:Store<RootState>

虽然我不完全确定这是否是循环依赖，因为您的 RootState 取决于存储。

【讨论】：