如何在Redux Toolkit Query查询前访问Store中的数据？

你当前的场景是：原本通过Thunk在请求后端前从Redux Store中获取额外数据（比如用户ID），现在要迁移到RTK Query，希望避免每次调用端点都手动传入这类Store中的数据。下面是几种可行的解决方案：

方案一：在单个端点中直接访问Store #

RTK Query的query函数可以接收第二个参数api，其中包含getState方法，能直接获取Store中的数据。适合仅少数端点需要从Store取数据的场景：

const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery(),
  endpoints: builder => ({
    updateSomething1: builder.mutation({
      // 第二个参数api提供getState方法
      query: (something: TypeForSomething, { getState }) => {
        // 从Store中获取需要的数据
        const userId = getState().user.id;
        return {
          url: `${userManagementUrl}/${userId}`,
          method: 'PATCH',
          body: something
        };
      }
    })
  })
});

方案二：通过BaseQuery注入通用数据 #

如果多个端点都需要用到Store中的同一类数据（比如用户ID、认证Token），可以在baseQuery中统一处理，避免重复代码：

示例1：在请求头中注入通用数据（比如Token） #

const baseQuery = fetchBaseQuery({
  baseUrl: '/api',
  prepareHeaders: (headers, { getState }) => {
    const token = getState().user.token;
    if (token) {
      headers.set('Authorization', `Bearer ${token}`);
    }
    return headers;
  }
});

示例2：动态修改URL参数（比如替换用户ID占位符） #

如果需要在URL中插入Store中的数据，可以自定义BaseQuery：

const customBaseQuery = async (args, api, extraOptions) => {
  const userId = api.getState().user.id;
  // 替换URL中的占位符
  const modifiedArgs = typeof args === 'string'
    ? args.replace(':userId', userId)
    : { ...args, url: args.url.replace(':userId', userId) };
  
  // 调用原生fetchBaseQuery
  return fetchBaseQuery({ baseUrl: '/api' })(modifiedArgs, api, extraOptions);
};

const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: customBaseQuery,
  endpoints: builder => ({
    updateSomething1: builder.mutation({
      query: (something: TypeForSomething) => ({
        url: `${userManagementUrl}/:userId`, // 用占位符标记需要替换的位置
        method: 'PATCH',
        body: something
      })
    })
  })
});

方案三：手动传入Store数据（直观简单） #

如果仅少数场景需要，或者希望调用逻辑更清晰，可以手动从Store中取出数据后作为参数传入端点：

端点定义： #

const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery(),
  endpoints: builder => ({
    updateSomething2: builder.mutation({
      // 接收userId和业务参数
      query: ({ userId, something }: { userId: string; something: TypeForSomething }) => ({
        url: `${userManagementUrl}/${userId}`,
        method: 'PATCH',
        body: something
      })
    })
  })
});

组件中调用： #

import { useSelector } from 'react-redux';
import { useUpdateSomething2Mutation } from './api';

const MyComponent = () => {
  // 从Store中获取userId
  const userId = useSelector(state => state.user.id);
  const [updateSomething] = useUpdateSomething2Mutation();

  const handleUpdate = (somethingData) => {
    // 传入userId和业务参数
    updateSomething({ userId, something: somethingData });
  };

  return <button onClick={() => handleUpdate({ /* 业务数据 */ })}>更新</button>;
};

方案选择建议 #

• 个别端点需要Store数据：用方案一，直接在端点的query函数中获取；
• 多个端点共用通用Store数据：用方案二，在BaseQuery中统一处理；
• 追求调用逻辑直观或数据非全局通用：用方案三，手动传入参数。

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