时间戳

首页 > 解决方案 > Redux Persist + Redux 工具包 $CombinedState 错误

redux - Redux Persist + Redux 工具包 $CombinedState 错误

问题描述

我正在尝试将 redux persist 添加到 redux 工具包，但由于某种原因，我Exported variable 'store' has or is using name '$CombinedState' from external module ".../node_modules/redux/index" but cannot be named.在 vscode 上遇到错误。

这是我的商店配置文件，其中添加了持久配置，如果我删除它，它可以正常工作。

import { configureStore } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { createEpicMiddleware } from "redux-observable";
import rootEpic from "onsite/redux/rootEpic";
import rootReducer from "onsite/redux/rootReducer";

const epicMiddleware = createEpicMiddleware();

const persistConfig = {
  key: "root",
  storage: storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

// Line that shows error
const store = configureStore({
  reducer: persistedReducer,
  middleware: [epicMiddleware],
});

export default store;

epicMiddleware.run(rootEpic);

我尝试过的其他事情是将combineReducers声明（从rootReducer导入）放入同一个文件或将文件转换为纯 javascript，具有相同或相似的结果。出于某种原因，打字稿决定仍然困扰着我的 javascript 文件:)

代码仍在运行，所以我很想就这样离开它，但我想摆脱它。

标签： reduxredux-toolkitredux-persist

解决方案

我有同样的问题，这就是我想出的：

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

import { 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。

推荐阅读