React Native/Expo/TS项目中Redux Toolkit的PayloadAction导出错误求助

问题描述 #

在React Native/Expo/TypeScript项目中使用如下导入语句：

import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';

其中createSlice和createAsyncThunk能正常使用，但PayloadAction触发TypeScript错误：

[ts] 模块"/Users/tim/Documents/Projects/app fullstack/my-app/node_modules/@reduxjs/toolkit/dist/index"没有导出成员'PayloadAction'。

查看Redux Toolkit的index文件后发现，TypeScript无法识别带type关键字的导出语句（例如export type { PayloadAction, ... } from './createAction';），但不带type关键字的导出（例如export { createSlice, ... } from './createSlice';）可以正常识别。

项目的package.json内容如下：

{
  "name": "my-app",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "npx expo start --port 8084",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "eslint .",
    "ts:check": "tsc"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.0.2",
    "@reduxjs/toolkit": "^2.2.1",
    "axios": "^1.6.7",
    "cors": "^2.8.5",
    "expo": "~50.0.2",
    "expo-asset": "~9.0.2",
    "expo-file-system": "~16.0.6",
    "expo-font": "~11.10.2",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.3",
    "expo-splash-screen": "~0.26.3",
    "expo-sqlite": "~13.2.2",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-web-browser": "~12.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "~0.19.6",
    "react-redux": "^9.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/node": "^20.11.20",
    "@types/react": "~18.2.45",
    "@types/sqlite3": "^3.1.11",
    "eslint": "^8.57.0",
    "eslint-config-universe": "^12.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.1",
    "prettier": "^3.2.5",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.1.3"
  },
  "private": true
}

可行解决方案 #

1. 直接从createAction模块导入类型 #

绕开顶层导出的类型识别问题，直接从createAction模块导入PayloadAction，并且用import type明确标记类型导入：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit/createAction';

2. 调整TypeScript配置 #

检查项目根目录的tsconfig.json，确保以下关键配置正确：

{
  "compilerOptions": {
    "moduleResolution": "node16", // 或 nodenext，适配ES模块导出规则
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": false, // 不要跳过库的类型检查，避免隐藏问题
    "strict": true
  }
}

修改后执行npm run ts:check验证类型是否正常。

3. 清理依赖缓存并重装 #

依赖缓存可能导致类型文件异常，执行以下步骤：

# 删除node_modules和锁文件
rm -rf node_modules
rm package-lock.json

# 重新安装依赖
npm install

4. 升级Redux Toolkit到最新版本 #

虽然当前使用的v2.2.1是较新版本，但后续版本可能修复了类型导出的bug，尝试升级：

npm update @reduxjs/toolkit

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