MapDispatchToProps causes Typescript Error in parent-component, expecting Actions to be passed as props

Question

In my child component I am defining MapDispatchToProps, pass them into connect and accordingly define an interface PropsFromDispatch that is extended in React.Component Props Interface. Now in my parent component Typescript is telling me that it is missing the properties that I defined in PropsFromDispatch.

This doesn't seem entirely absurd, as I am defining them as part of the React.Component Props interface, however I would expect 'connect' to take care of this the same way that it is taking care of my PropsFromState, which I also don't have to pass from parent to child component, but is mapped from the State to Props.

/JokeModal.tsx

...

interface Props extends PropsFromState, PropsFromDispatch {
    isOpen: boolean
    renderButton: boolean
}

...

const mapDispatchToProps = (dispatch: Dispatch<any>): 
PropsFromDispatch => {
    return {
        tellJoke: (newJoke: INewJoke) => dispatch(tellJoke(newJoke)),
        clearErrors: () => dispatch(clearErrors())
    }
}

interface PropsFromDispatch {
    tellJoke: (newJoke: INewJoke) => void
    clearErrors: () => void
}

...

export default connect(mapStateToProps, mapDispatchToProps)(JokeModal);

/Parent.tsx

...

button = <JokeModal isOpen={false} renderButton={true} /> 
...

In this line of /Parent.tsx Typescript is now telling me:

Type '{ isOpen: false; renderButton: true; }' is missing the 
following properties from type 'Readonly<Pick<Props, "isOpen" | 
"renderButton" | "tellJoke" | "clearErrors">>': tellJoke, clearErrors 
ts(2739)

Interestingly I can avoid the error entirely by removing MapDispatchToProps and instead passing in the actions directly into connect(including dispatch already in the action creator):

export default connect(mapStateToProps, { tellJoke, clearErrors })(JokeModal);

Nevertheless I would like to know how to use MapDispatchToProps here and also why Typescript is expecting me to pass these actions to the child component?

Happy to hear your advice!

Answer 1

I was able to reproduce your problem and the issue is apparently in the type signature of the mapDispatchToProps function in the source code, you can see that it has a type parameter Action = AnyAction

export interface Dispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): T
}

The solution to your problem is to change Dispatch<any> to Dispatch<AnyAction>:

const mapDispatchToProps = (dispatch: Dispatch<AnyAction>): PropsFromDispatch

Note that since you're using redux-thunk, the type system might not allow you to call dispatch on a thunk, so you might have to either cheat by calling

clearErrors: () => dispatch<any>(clearErrors());

or use rather verbose typing with ThunkDispatch and ThunkAction. I have an example of such a typing here: ThunkDispatch and the corresponding ThunkAction. Note that I use typesafe-actions.