在Preact中使用Redux Toolkit Query出现useContext读取null属性错误求助

问题描述 #

我正在尝试在Preact中配置Redux Toolkit (RTK) Query。基础配置可正常运行，但调用slice中的useGetUsersQuery钩子时出现以下错误：

错误信息：
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'useContext')

该错误触发自useGetUsersQuery()调用，相关组件代码：

export function Content() {
  const { data } = useGetUsersQuery();
  return (
    <div>Users</div>
  );
}

使用的依赖版本（通过preact/compat兼容react-redux）：

"@reduxjs/toolkit": "1.9.2",
"react-redux": "8.0.5"

store.ts代码：

const store = configureStore({
  reducer: {
    [userSlice.reducerPath]: userSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(userSlice.middleware),
});

export default store;

userSlice.ts代码：

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
type User = {
  id: number;
  name: string;
};
export const userSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com",
  }),
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => "users",
    }),
  }),
});

export const { useGetUsersQuery } =userSlice;

index.ts代码：

<Provider store={store}>
<App />
</Provider>

问题原因 #

你导入的是RTK Query针对React的版本（@reduxjs/toolkit/query/react），但Preact需要使用专门适配的Preact版本。钩子内部会尝试调用React的useContext，而Preact环境下该上下文未被正确初始化，因此触发Cannot read properties of null (reading 'useContext')错误。

解决步骤 #

1. 替换RTK Query的导入路径
   将userSlice.ts中的导入从React版本改为Preact专属版本：

   // 替换前
   import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
   
   // 替换后
   import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/preact";
   

2. 确认preact/compat配置正确
   确保项目已通过路径别名让React相关依赖指向preact/compat，例如在tsconfig.json中配置：

   {
     "compilerOptions": {
       "paths": {
         "react": ["./node_modules/preact/compat"],
         "react-dom": ["./node_modules/preact/compat"]
       }
     }
   }
   

   若使用Vite或Webpack，需在对应构建工具的配置文件中设置相同的别名规则。

3. 验证Provider包裹范围
   确保所有调用RTK Query钩子的组件都在react-redux的Provider内部，避免组件在上下文未初始化的环境中调用钩子。

额外说明 #

RTK Query从1.9.0版本开始正式支持Preact，专门提供了@reduxjs/toolkit/query/preact入口，无需再通过React版本做兼容，直接使用Preact专属入口即可避免这类上下文相关错误。

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