Organizing Listeners in Files and typescript

[azangru]

I am working through the Organizing Listeners in Files section of the docs, and while I like the first suggestion theree — roughly co-locating the effects with the redux slices whose actions they listen to — I am struggling to reconcile this with proper typescript annotations.

In the following example from the docs:

import { action1, listener1 } from '../features/feature1/feature1Slice'
import { action2, listener2 } from '../features/feature2/feature1Slice'

listenerMiddleware.startListening({ actionCreator: action1, effect: listener1 })
listenerMiddleware.startListening({ actionCreator: action2, effect: listener2 })

how would listener1 know the types of its parameters?

Here's what I've tried so far:

// created the listener middleware
// ...
export type AppStartListening = TypedStartListening<RootState, AppDispatch>;
export type Effect = Parameters<AppStartListening>[0]['effect']; // hoping that this would be the type of the listener

However, the Effect type thus extracted insists that its first parameter must be AnyAction, and complains if I try to pass it a PayloadAction.

What's your guidance on this?

[markerikson]

I don't think you want to extract an Effect type there. The startListening method is really designed to have type inference of the action type based on whichever of the four comparison fields you used, and pass the extracted action type into the effect field in the same object. So, just having {actionCreator: todoAdded, effect: (action, listenerApi) => {}) should work correctly to infer the type of action.

[azangru]

I don't think you want to extract an Effect type there.

I agree 😄 But given that, according to suggestion 1 in the docs, listenerMiddleware.startListening is in one file, whereas {actionCreator: todoAdded, effect: (action, listenerApi) => {}) is in the other file, how do I properly type the effect: (action, listenerApi) => {...} method? Specifically, how will it know about the type of the listenerApi, which, as far as I understand, only TypedStartListening knows about?

I suppose, ideally, the effect method should also know that the type of its action argument should match the type of the action created by the actionCreator.

[markerikson]

Hmm. Yeah, now that you mention it, that approach probably doesn't work well with TS, and I should probably note that in the docs.

I'd suggest going with approach 3 in that case - export a function from the slice that takes a TypedStartListening as an argument.

It's possibly we may be able to export a couple more of the internal types to help with approach 1, but not sure off the top of my head how feasible that is (and I would expect that defining an effect function strictly by itself would never be able to have any inference for action, because that does come from the other fields in the options object).

[azangru]

I would expect that defining an effect function strictly by itself would never be able to have any inference for action, because that does come from the other fields in the options object

Certainly; but one can either type and export the combination of { actionCreator, effect } in a single object; or declare the effect type as some kind of generic that requires a typeof actionCreator parameter to be fully typed.

[markerikson]

So the issue right now is that we have this AddListenerOverloads type that does the type inference. But, it's defined as an interface with multiple function overloads:

redux-toolkit/packages/toolkit/src/listenerMiddleware/types.ts

Lines 383 to 449 in 1751eb9

	export interface AddListenerOverloads<
	Return,
	State = unknown,
	Dispatch extends ReduxDispatch = ThunkDispatch<State, unknown, AnyAction>,
	ExtraArgument = unknown,
	AdditionalOptions = unknown
	> {
	/** Accepts a "listener predicate" that is also a TS type predicate for the action*/
	<MA extends AnyAction, LP extends ListenerPredicate<MA, State>>(
	options: {
	actionCreator?: never
	type?: never
	matcher?: never
	predicate: LP
	effect: ListenerEffect<
	ListenerPredicateGuardedActionType<LP>,
	State,
	Dispatch,
	ExtraArgument
	>
	} & AdditionalOptions
	): Return
	/** Accepts an RTK action creator, like `incrementByAmount` */
	<C extends TypedActionCreator<any>>(
	options: {
	actionCreator: C
	type?: never
	matcher?: never
	predicate?: never
	effect: ListenerEffect<ReturnType<C>, State, Dispatch, ExtraArgument>
	} & AdditionalOptions
	): Return
	/** Accepts a specific action type string */
	<T extends string>(
	options: {
	actionCreator?: never
	type: T
	matcher?: never
	predicate?: never
	effect: ListenerEffect<ReduxAction<T>, State, Dispatch, ExtraArgument>
	} & AdditionalOptions
	): Return
	/** Accepts an RTK matcher function, such as `incrementByAmount.match` */
	<MA extends AnyAction, M extends MatchFunction<MA>>(
	options: {
	actionCreator?: never
	type?: never
	matcher: M
	predicate?: never
	effect: ListenerEffect<GuardedType<M>, State, Dispatch, ExtraArgument>
	} & AdditionalOptions
	): Return
	/** Accepts a "listener predicate" that just returns a boolean, no type assertion */
	<LP extends AnyListenerPredicate<State>>(
	options: {
	actionCreator?: never
	type?: never
	matcher?: never
	predicate: LP
	effect: ListenerEffect<AnyAction, State, Dispatch, ExtraArgument>
	} & AdditionalOptions
	): Return
	}

There isn't a separate ListenerOptionsObject kind of type that can be used by itself.

I'm actually not sure if there's a good way to extract the "object" portion of that AddListenerOverloads type, tbh.