导出的变量“store”具有或正在使用外部模块错误 Redux 工具包中的名称“$CombinedState”并且 redux 持续存在

Question

嗨，我正在尝试让 redux 继续使用 redux 工具包（也在打字稿中） 我收到以下错误：

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

我看到这个问题之前被问过这里，但也没有得到回答。

以下是我的代码，如果您有解决此问题的想法，请告诉我，谢谢

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 取决于 store。

Answer 2

一个潜在的解决方案是扩展 RootState 类型以包含 $CombinedState，如下所示：

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

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

Answer 3

您需要从切片文件导出您的界面

例如下面：