reactjs - 导出变量 'store' 具有或正在使用来自外部模块错误 Redux 工具包和 redux 的名称 '$CombinedState'

Question

嗨，我正在尝试让 redux 坚持使用 redux 工具包(也在 typescript 中)我收到以下错误:

导出的变量“store”具有或正在使用来自外部模块“home/..../node_modules/redux/index”的名称“$CombinedState”，但无法命名。

我看到这个问题之前有人问过 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;

Answer 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 依赖于商店。