Redux Store类型不匹配求助：缺失dispatch等核心属性

问题场景 #

我在公共库中通过Redux Toolkit定义Redux Store，代码如下：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '@/common/combineReducer';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';

const logger = createLogger(); 
const initialState = {
   
};

const store = configureStore({
    reducer: rootReducer,
    middleware: [logger, thunk],
    devTools: process.env.NODE_ENV !== 'production',
    preloadedState: initialState
});

export default store;

随后在index.ts文件中导出该store：

import store from "./store/store";

export { 
    store 
}

在另一个项目中引入并使用该store时：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Chat from './App';
import { Provider } from 'react-redux';
import store from "rd-component";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

Visual Studio Code抛出类型错误：

Type 'typeof import("node_modules/rd-component/dist/index")' is missing the following properties from type 'Store<unknown, AnyAction>': dispatch, getState, subscribe, replaceReducer

公共库使用microbundle打包，package.json配置如下：

{
    "name": "rd-component",
    "type": "module",
    "version": "0.1.15",
    "source": "src/index.ts",
    "types": "dist/index.d.ts",
    "files": [
        "dist"
    ],
    "exports": {
        "require": "./dist/rdc.cjs",
        "types": "./dist/rdc.d.ts",
        "default": "./dist/rdc.modern.js"
    },
    "main": "./dist/rdc.cjs",
    "module": "./dist/rdc.module.js",
    "unpkg": "./dist/rdc.umd.js",
    "scripts": {
        "build": "microbundle",
        "dev": "microbundle watch"
    },
    "devDependencies": {
        "@types/react": "^18.2.0",
        "@types/redux-logger": "^3.0.9",
        "axios": "^1.3.4",
        "js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
        "microbundle": "^0.15.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-redux": "^8.0.5",
        "redux": "^4.2.1",
        "redux-logger": "^3.0.6",
        "uuid": "^9.0.0"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.9.5",
        "antd": "^5.4.6"
    }
}

报错原因 #

1. 导入方式错误：项目中使用默认导入import store from "rd-component"，实际导入的是整个模块对象，而非公共库中导出的store实例。
2. 类型导出问题：打包后的类型文件可能未正确导出store的类型信息，导致TypeScript无法识别导入对象的真实类型。

解决方案 #

1. 修正项目中的导入语句 #

公共库通过export { store }做了命名导出，因此项目中需要使用命名导入来获取store实例：

import { store } from "rd-component";

2. 确保公共库的类型正确导出 #

在公共库的store定义文件中，显式导出store相关类型，帮助TypeScript正确推断：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '@/common/combineReducer';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';

const logger = createLogger(); 
const initialState = {
   
};

const store = configureStore({
    reducer: rootReducer,
    middleware: [logger, thunk],
    devTools: process.env.NODE_ENV !== 'production',
    preloadedState: initialState
});

// 导出store相关类型
export type AppStore = typeof store;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

执行npm run build重新打包，确保microbundle正确生成包含类型信息的文件。

3. 验证package.json的类型配置 #

检查package.json中的types和exports字段，确保类型文件路径正确：

• 确认dist/rdc.d.ts文件存在，且包含store的导出声明。
• 如果microbundle生成的类型文件名与配置不符，调整package.json中的对应路径。

内容的提问来源于stack exchange，提问作者spark