如何记录Redux-Toolkit Query发起的所有API请求？

1. 扩展RTK Query的API中间件，监听action #

RTK Query在创建API切片时允许添加自定义中间件逻辑，可直接捕获它生成的所有action（包括请求发起、成功、失败的action，以及缓存更新的action），以此记录API调用和状态变更。

示例（创建API切片时添加）：

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

const apiSlice = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    // 你的端点定义
  }),
  // 自定义中间件逻辑
  middleware: (api) => (next) => (action) => {
    // 只处理RTK Query相关的action
    if (action.type.startsWith(api.reducerPath)) {
      // 记录请求核心信息：action类型、端点名称、参数、时间戳等
      console.log('RTK Query Action:', {
        type: action.type,
        endpoint: action.meta?.arg?.endpointName,
        params: action.meta?.arg?.originalArgs,
        timestamp: Date.now()
      });
      // 若需上报服务端，可在此调用上报接口
    }
    return next(action);
  },
});

该API切片的中间件会自动被getDefaultMiddleware()包含，无需手动额外添加（你的现有store配置已正确处理这一点）。

2. 自定义baseQuery包装fetch，记录请求全流程 #

不用替换fetch，可封装一个自定义baseQuery，在调用原生fetch前后插入日志逻辑，所有经过RTK Query的API请求都会被捕获。

示例代码：

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

// 包装原生fetch的自定义baseQuery
const customBaseQuery = async (args, api, extraOptions) => {
  // 记录请求发起时的信息
  const requestLog = {
    url: typeof args === 'string' ? args : args.url,
    method: typeof args === 'string' ? 'GET' : args.method || 'GET',
    params: typeof args === 'string' ? undefined : args.params,
    timestamp: Date.now()
  };
  console.log('RTK Query API Request:', requestLog);

  // 调用原生fetch的baseQuery逻辑
  const result = await fetchBaseQuery({ baseUrl: '/api' })(args, api, extraOptions);

  // 记录响应结果
  console.log('RTK Query API Response:', {
    ...requestLog,
    status: result.error ? result.error.status : 200,
    data: result.data,
    error: result.error?.message
  });

  return result;
};

// 使用自定义baseQuery创建API切片
const apiSlice = createApi({
  baseQuery: customBaseQuery,
  endpoints: (builder) => ({
    // 你的端点定义
  }),
});

这种方式完全基于原生fetch，无需替换为axios，能精准捕获每个请求的发起与响应细节。

3. 利用Redux Store的subscribe监听状态变更 #

Redux Store自带subscribe方法，可在store创建后订阅状态变化，对比前后状态中RTK Query的缓存部分，记录变更内容。

示例（在你的store配置文件中添加）：

import { apiSlice } from './path-to-your-api-slice'; // 导入你的API切片

// 保存上一次的RTK Query状态快照
let prevApiState = store.getState()[apiSlice.reducerPath];

store.subscribe(() => {
  const currentApiState = store.getState()[apiSlice.reducerPath];
  // 仅在状态变化时记录
  if (currentApiState !== prevApiState) {
    console.log('RTK Query State Changed:', {
      previous: prevApiState,
      current: currentApiState,
      timestamp: Date.now()
    });
    // 上报服务端逻辑可在此实现
    prevApiState = currentApiState;
  }
});

注意：这种方式会监听所有状态变化，可能产生冗余日志，适合需要完整追踪缓存状态变更的场景。

4. 自定义redux-logger过滤规则，聚焦RTK Query日志 #

如果你已经在用redux-logger，可以自定义过滤和格式化规则，只保留RTK Query相关的action与状态变更，同时扩展日志内容。

修改你的现有store配置：

import { configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger'
import { apiSlice } from './path-to-your-api-slice'; // 导入你的API切片

import { rootReducer } from 'src/reducers/rootReducer';

const otherMiddlewares: any[] = [];

if (process.env.NODE_ENV === `development`) {
  // 自定义logger，仅记录RTK Query相关内容
  const customLogger = logger({
    predicate: (getState, action) => {
      // 过滤出RTK Query的action
      return action.type.startsWith(apiSlice.reducerPath);
    },
    // 自定义日志格式，补充API细节
    formatter: (action, getState, previousState) => {
      return {
        actionType: action.type,
        endpoint: action.meta?.arg?.endpointName,
        params: action.meta?.arg?.originalArgs,
        prevApiState: previousState[apiSlice.reducerPath],
        currentApiState: getState()[apiSlice.reducerPath],
        timestamp: Date.now()
      };
    }
  });
  otherMiddlewares.push(customLogger);
}

export const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().concat(otherMiddlewares)
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

这种方式可复用现有redux-logger配置，精准聚焦RTK Query的相关日志。

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