I have created a connected component that utilizes mapStateToProps and mapDispatchToProps to inject the properties into the Props without the need for the parent to inject anything. However, TypeScript raises an error when I import it into another component.
Form.tsx:
type IProps = {
insertError: boolean,
cleanErrors: () => ICleanErrorsAction,
addArticle: (arg0: IArticle) => IAddArticleAction
}
type IState = {
title: string,
[id:string]: string
}
class ConnectedForm extends Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
title: ""
};
}
render() {
// some implementation
return (
<form onSubmit={this.handleSubmit}>
// some implementation
</form>
);
}
}
const mapDispatchToProps = (dispatch: any) => {
return {
addArticle: (article: IArticle) => addArticleAction(article),
cleanErrors: () => cleanErrorsAction()
};
}
const mapStateToProps = (state: IStore): any => {
return state.errors.insertError
}
const Form = connect(mapStateToProps, mapDispatchToProps)(ConnectedForm);
export default Form;
When using <Form /> in the parent component, TypeScript throws the following error:
Type '{}' is missing the following properties from type 'Readonly<Pick<IProps, "insertError" | "cleanErrors" | "addArticle">>': insertError, cleanErrors, addArticleI prefer not to make every field in Props optional just to avoid null checks...
The props are passed through the connect function, so there should be no need to pass them again. Any suggestions would be appreciated.
Thanks.