createApi查询完成时如何派发Action？能否在其作用域内直接实现？

完全可以在createApi的作用域内实现获取响应后派发Action的需求，RTK Query提供了两个实用的钩子来处理这类场景：

方法一：利用transformResponse钩子 #

transformResponse专门用于处理服务器返回的数据，你可以在这里拿到响应结果，同时通过参数里的api对象直接调用dispatch方法派发Action。

修改后的代码示例：

export const documentApi = createApi({
  reducerPath: 'documentApi',
  baseQuery: fetchBaseQuery({
    baseUrl: setBaseUrl('/documents'),
    prepareHeaders: async (headers) => setHeaders(headers),
  }),
  endpoints: (builder) => ({
    getDocuments: builder.query<AssignNormalizedData, TGetDocumentsProps>({
      query: (params) => ({
        url: '',
        params,
      }),
      // 处理响应并派发Action
      transformResponse: (response: AssignNormalizedData, api) => {
        // 替换成你实际需要派发的Action
        api.dispatch(setDocumentsList(response));
        // 务必返回响应数据，供组件或其他逻辑使用
        return response;
      },
    }),
  }),
});

这个钩子会在请求成功拿到响应后立即触发，适合数据返回后同步更新其他状态的简单场景。

方法二：使用onQueryStarted钩子 #

onQueryStarted能监听请求的完整生命周期（开始、成功、失败），灵活性更强，适合需要处理多阶段逻辑的场景。

修改后的代码示例：

export const documentApi = createApi({
  reducerPath: 'documentApi',
  baseQuery: fetchBaseQuery({
    baseUrl: setBaseUrl('/documents'),
    prepareHeaders: async (headers) => setHeaders(headers),
  }),
  endpoints: (builder) => ({
    getDocuments: builder.query<AssignNormalizedData, TGetDocumentsProps>({
      query: (params) => ({
        url: '',
        params,
      }),
      async onQueryStarted(args, { dispatch, queryFulfilled }) {
        try {
          // 等待请求成功完成，获取响应数据
          const { data } = await queryFulfilled;
          // 请求成功后派发Action
          dispatch(setDocumentsList(data));
        } catch (err) {
          // 可选：添加请求失败的处理逻辑
          console.error('getDocuments请求失败:', err);
        }
      },
    }),
  }),
});

通过queryFulfilled这个Promise，你可以精准控制在请求成功后执行Action派发，还能同时处理失败情况。

两种方案都不需要脱离createApi的作用域，直接在endpoint定义中就能完成需求，可根据实际场景选择。

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