Get type definition for props.dispatch() for using TypeScript with React-Redux - reactjs

Question

I have this functional/stateless component:
import React from 'react';
import {useFormik} from 'formik';
import {connect} from "react-redux";
function mapStateToProps(){
return {
foo: "bar"
}
}
interface OwnProps {
propFromParent: number
}
type StateProps = ReturnType<typeof mapStateToProps>
type Props = StateProps & OwnProps
const SignupForm = (props: Props) => {
const formik = useFormik({
initialValues: {
email: '',
name: '',
password: ''
},
onSubmit(values) {
props.dispatch() // props.dispatch is not defined!
}
});
return (
<form onSubmit={formik.handleSubmit}>
<label htmlFor="name">Full Name</label>
<input
id="name"
name="name"
type="name"
onChange={formik.handleChange}
value={formik.values.name}
/>
<button type="submit">Submit</button>
</form>
);
};
export default connect<StateProps, null, Props>(mapStateToProps)(SignupForm);
so I am getting this compile error:
So how can I include the type definition so that props.dispatch is defined?
Just looking for help with the proper TS definitions.

Answer 1

Please see the React-Redux docs on "Static Typing", which show how to handle defining the correct types for what connect will pass into your component.
Specifically, we recommend using the ConnectedProps<T> helper, like this:
import { connect, ConnectedProps } from 'react-redux'
interface RootState {
isOn: boolean
}
const mapState = (state: RootState) => ({
isOn: state.isOn
})
const mapDispatch = {
toggleOn: () => ({ type: 'TOGGLE_IS_ON' })
}
const connector = connect(
mapState,
mapDispatch
)
// The inferred type will look like:
// {isOn: boolean, toggleOn: () => void}
type PropsFromRedux = ConnectedProps<typeof connector>
interface Props extends PropsFromRedux {
backgroundColor: string
}
const MyComponent = (props: Props) => (
<div style={{ backgroundColor: props.backgroundColor }}>
<button onClick={props.toggleOn}>
Toggle is {props.isOn ? 'ON' : 'OFF'}
</button>
</div>
)
export default connector(MyComponent)

Answer 2

You need to add a new function and pass it to connect() as second argument
...
function mapDispatchToProps(dispatch): IDispatchProps {
return {
dispatch
};
}
connect(mapStateToProps, mapDispatchToProps)