reduxjs / redux-toolkit

The official, opinionated, batteries-included toolset for efficient Redux development
https://redux-toolkit.js.org
MIT License
10.72k stars 1.17k forks source link

`listenerMiddleware` type error in matcher using custom actions. #4641

Open antondalgren opened 1 month ago

antondalgren commented 1 month ago

I have a codebase using legacy redux patterns and trying to slowly but steadily transition to using modern redux. I have a set of old Actions that are created similiar to ExtraAction mentioned below. When using the listenerMiddleware to add a set of type guards as matchers using the isAnyOf utility as demonstrated below, I see a type error on the matcher.

Also, it seems as the type inferred from the predicate (probably the matcher to) doesn't carry along into effect callback.

    interface ExtraAction extends Action {
      payload: number
    }

    function isPayloadAction(action: any): action is ExtraAction {
      return (
        isFluxStandardAction(action) && typeof action.payload === 'number'
      )
    }

    startListening({
      matcher: isAnyOf(isPayloadAction),
      effect: (action, listenerApi) => {
        expectTypeOf(action).toMatchTypeOf<ExtraAction>()
      },
    })
EskiMojo14 commented 1 month ago

predicate isn't used as a type guard, only matcher is.

Could you post what the type error you're getting is?

https://github.com/reduxjs/redux-toolkit/issues/3862 is also likely related.

antondalgren commented 1 month ago

predicate isn't used as a type guard, only matcher is.

Could you post what the type error you're getting is?

3862 is also likely related.

Thank you for the swift response.

Here is the ts-error:

No overload matches this call.
  The last overload gave the following error.
    Type '(action: any) => action is ActionMatchingAnyOf<[(action: any) => action is ExtraAction]>' is not assignable to type 'undefined'.ts(2769)
types.ts(489, 7): The expected type comes from property 'matcher' which is declared here on type '{ actionCreator?: undefined; type?: undefined; matcher?: undefined; predicate: AnyListenerPredicate<unknown>; effect: ListenerEffect<UnknownAction, unknown, ThunkDispatch<unknown, unknown, UnknownAction>, unknown>; }'
types.ts(485, 3): The last overload is declared here.

This does provide action with the correct type, thus using a type guard as predicate should carry along the correct type, shouldn't it? 🤔

    startListening({
      predicate: incrementByAmount.match,
      effect: (action, listenerApi) => {
        expectTypeOf(action).toMatchTypeOf<ExtraAction>()
      },
    })
markerikson commented 1 month ago

No, predicate explicitly does not narrow the action type. It's a very generic (action, prevState, nextState) => boolean callback that could have any logic inside, and so it can't guarantee the type of action.

antondalgren commented 1 week ago

No, predicate explicitly does not narrow the action type. It's a very generic (action, prevState, nextState) => boolean callback that could have any logic inside, and so it can't guarantee the type of action.

OK. The explanation of the issue still holds for matchers. Any suggestions on how I could fix this in either a PR or a workaround in my codebase?

EskiMojo14 commented 1 week ago

have you checked out the issue i linked, and tried moving the isAnyOf call to a separate variable like the replies to that issue recommend?