Use react-redux connect in typescript
A couple of things I notice:
1) As far as I've seen in examples and when working with props
in TypeScript, your call to React.Component
needs to specify Props
as a type argument like so:
export default class TestPage extends React.Component<Test.Props, Test.State>{
constructor(props: Test.Props) {
super(props);
}
}
You can specify that your component does not accept props
or state
by passing empty interfaces i.e.:
export default class TestPage extends React.Component<{}, {}>{
// constructor becomes 'useless' at this point and is not needed
constructor() {
super();
}
}
I think this explains why your call signature is not matching and why there are no properties visible on this.props
- TS sees an interface of ReadOnly{}
since it has no type arguments passed in.
2) Your mapStateToProps
function doesn't look quite right. mapStateToProps
takes two arguments, state
(referencing your Redux store
) and ownProps
as an optional second argument, which refers to props
passed down from the parent. So mapStateToProps
should look like this:
function mapStateToProps(state: any, ownProps: { label: string }) {
return {
label: ownProps.label
};
}
This is my guess for why connect
is throwing an error - it is simply a place where you make assertions about how Redux should handle combining props
coming from the store
and props
coming from the parent. Let me know if this works out.
This doesn't work because connect is a generic function. This means you need to provide additional type parameters.
connect<StateProps, DispatchProps>({
mapStateToProps,
mapDispatchToProps,
})(SomeComponent);
You can find typing implementation here. Everything you need to know is there C: