如何在非React环境中使用Redux Toolkit Query

Redux Toolkit Query是Redux Toolkit官方提供的数据请求和缓存工具，默认和React的hooks体系深度绑定，不过它本质上基于Redux的middleware实现，完全可以在非React环境中独立使用，只需要手动处理store的创建和请求触发逻辑即可。

环境准备

首先需要在项目中安装必要的依赖包，除了Redux Toolkit本身，还需要安装Redux的核心库，因为非React环境不需要react-redux，所以不需要安装相关绑定包。执行以下命令安装依赖：

npm install @reduxjs/toolkit redux

创建API服务定义

和React环境中一样，首先需要使用createApi方法定义API服务，指定请求的基础地址、端点等信息。以下是一个简单的用户数据请求API定义示例：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// 定义API服务
const userApi = createApi({
  // API的唯一标识，会作为store中state的键名
  reducerPath: 'userApi',
  // 基础请求配置，这里使用fetchBaseQuery作为请求工具
  baseQuery: fetchBaseQuery({ baseUrl: 'https://ipipp.com/api/' }),
  // 定义端点
  endpoints: (builder) => ({
    // 获取用户列表的查询端点
    getUserList: builder.query({
      query: () => 'users',
    }),
    // 获取单个用户详情的查询端点，接收id参数
    getUserDetail: builder.query({
      query: (id) => `users/${id}`,
    }),
  }),
})

// 导出自动生成的hooks，非React环境不需要使用，但导出不影响功能
export const { useGetUserListQuery, useGetUserDetailQuery } = userApi

// 导出API的reducer和middleware，后续配置store需要用到
export const userApiReducer = userApi.reducer
export const userApiMiddleware = userApi.middleware

配置Redux Store

非React环境需要手动创建Redux store，将API的reducer和middleware正确配置到store中，这是使用Redux Toolkit Query的核心步骤。配置代码如下：

import { configureStore } from '@reduxjs/toolkit'
import { userApiReducer, userApiMiddleware } from './userApi'

// 创建Redux store
const store = configureStore({
  reducer: {
    // 将API的reducer挂载到对应的reducerPath下
    userApi: userApiReducer,
  },
  middleware: (getDefaultMiddleware) => {
    // 将API的middleware添加到默认中间件列表中
    return getDefaultMiddleware().concat(userApiMiddleware)
  },
})

export default store

触发请求和读取状态

在React环境中我们通过hooks自动触发请求和获取状态，非React环境需要手动调用API生成的action来触发请求，再从store的state中读取对应的请求状态和数据。

触发请求

每个查询端点都会自动生成一个对应的initiate action，调用这个action并dispatch到store中就可以触发请求。示例如下：

import store from './store'
import { userApi } from './userApi'

// 触发获取用户列表的请求，不需要参数
store.dispatch(userApi.endpoints.getUserList.initiate())

// 触发获取用户详情的请求，传入用户id参数
store.dispatch(userApi.endpoints.getUserDetail.initiate(1))

读取请求状态和数据

请求触发后，Redux Toolkit Query会自动管理请求的状态，包括加载中、数据、错误等信息，这些信息都存储在store的对应API的state中。我们可以通过select方法获取对应的选择器来读取状态：

import store from './store'
import { userApi } from './userApi'

// 获取用户列表的状态选择器
const userListSelector = userApi.endpoints.getUserList.select()

// 从store中获取用户列表的状态
const userListState = userListSelector(store.getState())

// 打印状态信息
console.log('是否加载中:', userListState.isLoading)
console.log('是否请求成功:', userListState.isSuccess)
console.log('请求数据:', userListState.data)
console.log('错误信息:', userListState.error)

// 获取id为1的用户详情状态选择器
const userDetailSelector = userApi.endpoints.getUserDetail.select(1)
const userDetailState = userDetailSelector(store.getState())
console.log('用户1的详情:', userDetailState.data)

注意事项

• 非React环境中不需要安装react-redux相关包，所有状态读取和action触发都通过原生Redux的store API完成。
• 如果需要在请求完成后执行自定义逻辑，可以监听store的状态变化，或者通过initiate action返回的promise来处理，initiate方法返回的promise会在请求完成后resolve或reject。
• Redux Toolkit Query的缓存机制依然生效，重复触发相同的请求会优先返回缓存数据，不需要额外处理。
• 如果需要取消请求，可以保存initiate返回的promise的abort方法，调用即可取消未完成的请求。

完整示例整合

以下是一个完整的可运行示例，整合了上述所有步骤：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { configureStore } from '@reduxjs/toolkit'

// 1. 定义API
const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://ipipp.com/api/' }),
  endpoints: (builder) => ({
    getUserList: builder.query({
      query: () => 'users',
    }),
  }),
})

const { getUserList } = userApi.endpoints

// 2. 配置store
const store = configureStore({
  reducer: {
    userApi: userApi.reducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(userApi.middleware),
})

// 3. 触发请求
store.dispatch(getUserList.initiate())

// 4. 读取状态
const selector = getUserList.select()
const state = selector(store.getState())
console.log('初始状态:', state)

// 监听状态变化
store.subscribe(() => {
  const newState = selector(store.getState())
  // 只在状态变化时打印
  if (newState !== state) {
    console.log('更新后的状态:', newState)
  }
})

Redux_Toolkit_QueryReduxJavaScript状态管理修改时间：2026-07-06 08:00:26