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",= // 删掉末尾的等号
修复步骤
- 修改
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
- 删掉
package.json里react依赖行末尾多余的等号,重新执行依赖安装命令。 - (可选排查)执行
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
相关产品推荐
相关产品推荐

