You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React 18升级后RTK Query报错:无法找到react-redux上下文值

React 18 与 RTK Query 兼容性说明

React 18 和 RTK Query 本身不存在兼容性问题,你当前遇到的报错是代码写法问题,和版本兼容无关。

问题定位

核心错误在store.tsx里手动给store加了: Store类型标注,这个基础类型会抹掉RTK Query中间件注入的扩展类型,导致RTK Query的hooks无法获取正确的store上下文类型,在React 18的严格渲染检测下触发异常。普通Redux slice不依赖这些中间件扩展属性,所以能正常运行。

另外你package.json里react依赖行多了个多余的等号,也需要修正避免依赖安装异常:

"react": "^18.2.0",= // 删掉末尾的等号
修复步骤
  1. 修改store.tsx,移除手动的Store类型标注,让TS自动推导store的完整类型,修正后代码如下:
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { pokemonApi } from './services/pokemon'

// 删掉: Store标注,保留自动推导
export const store = configureStore({
  reducer: {
    [pokemonApi.reducerPath]: pokemonApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(pokemonApi.middleware),
})

setupListeners(store.dispatch)

// 项目中需要用到state、dispatch类型时直接从store推导即可
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
  1. 删掉package.json里react依赖行末尾多余的等号,重新执行依赖安装命令。
  2. (可选排查)执行npm ls react、npm ls react-redux检查项目中是否存在多版本react/react-redux共存的情况,如果有就统一升级到你当前声明的兼容版本即可。

你当前使用的@reduxjs/toolkit@1.8.2、react-redux@8.0.2版本均已完成React 18适配,改完上述问题即可正常运行。

内容的提问来源于stack exchange,提问作者Matt Herbstritt

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 14:12:17