React 18中无法从redux-persist导入模块及相关报错问题

1. 解决redux-persist模块无法加载/跳转的问题 #

• 执行依赖重装，清除安装缓存：

  rm -rf node_modules package-lock.json yarn.lock
  npm install # 或 yarn install
  

• 重启IDE（如VS Code），并清除TypeScript缓存：
  • 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server执行
• 检查tsconfig.json的模块解析配置，确保moduleResolution设置为Node16、NodeNext或Node：

  {
    "compilerOptions": {
      "moduleResolution": "Node16"
    }
  }
  

2. 解决Error: No data found at state.baseApi报错 #

该报错的核心原因是未将RTK Query的baseApi reducer添加到Redux Store的reducer配置中。RTK Query要求必须将API的reducer挂载到store.reducer的[baseApi.reducerPath]字段下，修改后的代码如下：

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query/react';
import { baseApi } from './base-api';
import {
  persistStore,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import { announcementSlice } from '../../components/molecules/Announcement/state/announcement.slice';

export const store = configureStore({
  reducer: {
    announcements: announcementSlice.reducer,
    // 新增：挂载baseApi的reducer
    [baseApi.reducerPath]: baseApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(baseApi.middleware),
});

export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

setupListeners(store.dispatch);

修改后RTK Query即可找到对应state路径，报错会消失。

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