What is the current behavior?
when specifying OwnProps and Props like this:
type OwnProps = {
name: string,
}
type Props = {
toggleSidebar: () => void,
}
type HamburgerProps = OwnProps & Props
function Hamburger({ name, toggleSidebar }: HamburgerProps) {
return (
<div>
<IconButton
name={name}
onPress={toggleSidebar}
/>
</div>
)
}
const connector: Connector<OwnProps, Props> = connect(
null,
{ toggleSidebar },
)
export default connector(Hamburger)
the following cryptic error occurs (VS Code + eslint):
file: 'file:///Users/jamesgillmore/React/apps/celebvidy-web/src/components/Sidebar/Hamburger.js'
severity: 'Error'
message: '[flow] function call (Function cannot be called on any member of intersection type intersection Member 1: function type Error: property `name` Property not found in object type Member 2: polymorphic type: function type Error: function Callable signature not found in statics of React$Component)'
at: '38,16'
source: 'flow'
What is the expected behavior?
The connected container component is properly typed so that usages can benefit from the type information in the props applied to the resulting react component.
Which versions of Redux, and which browser and OS are affected by this issue? Did this work in previous versions of Redux?
3.6.0
VS Code
I found that the following solved it:
type OwnProps = {
name: string,
}
type Props = {
toggleSidebar: () => void,
} & OwnProps
function Hamburger({ name, toggleSidebar }: Props) {...
const connector: Connector<OwnProps, Props> = connect(({...
I'm still not sure if that's the idiomatic and correct way to do it. I.e. Props expects the combination of OwnProps and redux props, not just redux props.
Most helpful comment
I found that the following solved it:
I'm still not sure if that's the idiomatic and correct way to do it. I.e.
Propsexpects the combination ofOwnPropsand redux props, not just redux props.