RTK query (createApi) with listenerMiddleware

Question

I have an alertsApi and alertsSlice in my store,

I want to be able to do data manipulation on the alerts I'm receiving

//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;

Really appreciate the help!!

I've seen the https://redux-toolkit.js.org/api/createListenerMiddleware docs and I haven't understood it completely..

this is the error I received the Error

what am I suppose to set the listener to?

Answer 1

It's

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