RTK查询(createApi)与listener中间件

Question

我有一个alertsApi和alertsSlice在我的商店，

我希望能够对我收到的警报进行数据操作

//Store.ts
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
mport alertsReducer from './slices/alertsSlice';
import { alertsApi, useGetAllAlertsQuery } from './slices/alertsApi';
const listenerMiddleware = createListenerMiddleware();

listenerMiddleware.startListening({
actionCreator: useGetAllAlertsQuery        <<<<-------- this is my problem
effect: async (action, listenerApi) => {
console.log(listenerApi.getOriginalState());
console.log(action);
await listenerApi.delay(5000);
console.log(listenerApi.getState());
},
});

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

//alertsSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { AlertInterface } from './interfaces';
interface AlertsStore {
filteredAlerts: AlertInterface[]
}
const initialState: AlertsStore = {
filteredAlerts:[]
};
const alertsSlice = createSlice({
name: 'alerts',
initialState,
reducers: {
sortByPriority(state, action: PayloadAction<AlertInterface[]>) {
// the sort process..
}
},
});
export const {
sortByPriority
} = alertsSlice.actions;
export default alertsSlice.reducer;

//alertsApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react';
import { AlertInterface } from './interfaces';
export const alertsApi = createApi({
reducerPath: 'alertsApi',
baseQuery: fetchBaseQuery({
baseUrl: config.URL
}),
tagTypes: ['Alerts'],
endpoints: (builder) => ({
getAllAlerts: builder.query<AlertInterface[], void>({
query: () => `alert`,
providesTags: [{ type: 'Alerts', id: 'LIST' }]
})
})
});
export const {
useGetAllAlertsQuery
} = alertsApi;

非常感谢您的帮助!!

我看过https://redux-toolkit.js.org/api/createListenerMiddleware文档，我还没有完全理解它。

这是我收到的错误误差

我应该把监听器设置成什么?

Answer 1

listenerMiddleware.startListening({
matcher: alertsApi.endpoints.getAllAlerts.matchFulfilled,