Attempt to write a hook using addListener for any createApi instance

[dshmatok]

Hello!

I am trying to make a new functionality for subscribing to changes in the status of endpoints of any of my createApi instance in my components. I made a hook that triggers an events subscription (matchPending, matchFulfilled, matchRejected) and executes the callback passed to it.

My createApi instance:
https://codesandbox.io/s/react-redux-toolkit-wbzkgc?file=/src/store/api.ts:75-338

const APISlice = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: "/api/v1"
  }),
  reducerPath: "APISlice",
  endpoints: (builder) => ({
    getUser: builder.query<{ user: string }, void>({
      query: () => ({
        url: "user"
      })
    })
  })
});

Hook useApiMiddlewareListener:
https://codesandbox.io/s/react-redux-toolkit-wbzkgc?file=/src/hooks/index.tsx:0-1001

import { useEffect } from "react";
import { addListener } from "@reduxjs/toolkit";
import { useAppDispatch } from "../store";

import { APISlice } from "../store/api";

import type { AnyAction, ListenerEffect } from "@reduxjs/toolkit";
import type { RootStore, AppDispatch } from "../store/index";

type APISliceEndpoints = keyof typeof APISlice.endpoints;

type APISliceEndpointsMatchers = keyof Pick<
  typeof APISlice.endpoints[APISliceEndpoints],
  "matchPending" | "matchFulfilled" | "matchRejected"
>;

function useApiMiddlewareListener(arg: {
  endpoint: APISliceEndpoints;
  matcher: APISliceEndpointsMatchers;
  effect: ListenerEffect<AnyAction, RootStore, AppDispatch>;
}) {
  const dispatch = useAppDispatch();

  useEffect(() => {
    const unsubscribeFunc = dispatch(
      addListener({
        predicate: APISlice.endpoints[arg.endpoint][arg.matcher],
        effect: arg.effect
      })
    );

    return unsubscribeFunc;
  }, [arg, dispatch]);
}

export { useApiMiddlewareListener };

Use useApiMiddlewareListener hook to implement some logic inside any component:
https://codesandbox.io/s/react-redux-toolkit-wbzkgc?file=/src/App.js

export default function App() {
  useApiMiddlewareListener({
    endpoint: "getUser",
    matcher: "matchFulfilled",
    effect: (action, listenerApi) => {
      // some logic inside component scope
    }
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

But there was an error typing the listenerApi object. when trying to explicitly specify the type ListenerEffect<AnyAction, RootStore, AppDispatch>:

The expected type comes from property 'effect' which is declared here on type 
'{ 
  actionCreator?: undefined; 
  type?: undefined; 
  matcher?: undefined; 
  predicate: Matcher<PayloadAction<{ user: string; }, string, { arg: QueryThunkArg & { originalArgs: void; }; requestId: string; requestStatus: "fulfilled"; } & { ...; }, never>> | Matcher<...> | Matcher<...>; 
  effect: ListenerEffect<...>; 
}'

For some reason, the error specifies a value for predicate, although I pass the object to matcher:

  matcher?: undefined; 
  predicate: Matcher<PayloadAction<{ user: string; }, string, { arg: QueryThunkArg & { originalArgs: void; }; requestId: string; requestStatus: "fulfilled"; } & { ...; }, never>> | Matcher<...> | Matcher<...>; 

I just wanted to explicitly specify the type for my RootStore and AppDispatch:

ListenerEffect<AnyAction, RootStore, AppDispatch>

Maybe someone can help me point out my mistake?
Or maybe the types AnyAction, RootStore, AppDispatchshould be passed to some other generics, ones so that they are passed to the effect callback signature?

Or should I stop trying to create such functionality altogether 😂
Thanks!

[markerikson]

I'd assume it's feasible, but I'm afraid I don't have time to actually look at the types behavior and figure out how to tweak things.