RTK Query中listenerMiddleware监听查询结果的配置问题

你在使用Redux Toolkit的listenerMiddleware监听RTK Query的告警查询完成事件时，错误地将React Hook useGetAllAlertsQuery 作为actionCreator传入，导致报错。useGetAllAlertsQuery是用于React组件中触发查询的Hook，并非Redux action creator，无法被listenerMiddleware识别。

解决方案 #

RTK Query会为每个端点自动生成对应的action creator，存放在alertsApi.endpoints.[endpointName]下，你可以通过以下方式监听查询完成事件：

1. 获取正确的actionCreator
   对于getAllAlerts这个查询端点，查询成功完成对应的action creator是alertsApi.endpoints.getAllAlerts.fulfilled；如果需要监听查询开始或失败，可分别使用pending或rejected。

2. 修改Store.ts代码
   移除对useGetAllAlertsQuery的导入，替换为正确的actionCreator，并在effect中处理返回的告警数据：

import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
import alertsReducer, { sortByPriority } from './slices/alertsSlice';
import { alertsApi } from './slices/alertsApi';

const listenerMiddleware = createListenerMiddleware();

listenerMiddleware.startListening({
  actionCreator: alertsApi.endpoints.getAllAlerts.fulfilled, // 正确的actionCreator
  effect: async (action, listenerApi) => {
    // action.payload即为查询返回的告警数组
    const fetchedAlerts = action.payload;
    
    // 示例：调用alertsSlice中的sortByPriority方法处理数据
    listenerApi.dispatch(sortByPriority(fetchedAlerts));
    
    // 也可直接获取当前状态或执行其他异步逻辑
    console.log('查询完成后的告警数据:', fetchedAlerts);
  },
});

export const store: any = configureStore({
  reducer: {
    alerts: alertsReducer,
    [alertsApi.reducerPath]: alertsApi.reducer
  },
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware()
      .prepend(listenerMiddleware.middleware)
      .concat(alertsApi.middleware)
});

补充说明 #

• 如果需要监听所有RTK Query的查询事件，也可以通过action类型前缀匹配（比如/alertsApi/开头的action），但使用端点对应的fulfilled/pending/rejected actionCreator是更精准的方式。
• 在effect中，你可以通过listenerApi.dispatch触发其他slice的action，或者直接更新状态（不过推荐通过dispatch action来修改slice状态）。

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