如何用console.log测试React Toolkit Query？新手RTK Query调试方案

先提个小细节：你代码里的getSearch用了builder.mutation但实际是GET请求，RTK Query里mutation一般用于修改数据的操作（POST/PUT/DELETE等），GET类的查询建议改成builder.query，这会更贴合RTK Query的设计，也方便后续的测试和使用。

下面是几种控制台测试的实用方法：

1. 用Redux DevTools触发查询（推荐） #

打开浏览器控制台的Redux DevTools标签：

• 找到对应reducerPath（你这里是search）的slice
• 切换到"Dispatch"面板，输入RTK Query生成的触发action：

  search.endpoints.getSearch.initiate('你的测试关键词')
  

• 执行后就能在DevTools里看到请求的状态变化、返回数据，还能追踪整个数据流的过程。

2. 直接在控制台调用API方法 #

如果你的API实例能访问到（可以在组件里临时挂载到全局：window.searchApi = search），直接在控制台执行：

// 如果改成query后的写法
searchApi.endpoints.getSearch.initiate('测试关键词').unwrap()
  .then(response => console.log('查询结果:', response))
  .catch(error => console.error('请求错误:', error))

// 如果你暂时不改mutation，写法如下
searchApi.endpoints.getSearch.initiate({ keyword: '测试关键词' }).unwrap()
  .then(res => console.log(res))
  .catch(err => console.error(err))

unwrap()方法会把RTK Query返回的Observable转换成Promise，方便直接获取响应或错误信息。

3. 查看网络请求验证 #

打开控制台的Network标签，筛选"XHR/Fetch"：

• 触发组件里的查询（比如渲染使用useGetSearchQuery的组件）
• 直接查看请求的URL是否正确、参数是否携带、响应状态码和返回数据是否符合预期，这是最直观的验证方式。

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