I've looked at the Redux flow example and tried to model this setup after it: https://github.com/reactjs/redux/blob/master/examples/todos-flow/src/containers/FilterLink.js
Here is the code:
// @flow
//imports...
type OwnProps = {
dispatch: Dispatch,
ownProp1: Object,
ownProp2: string,
ownProp3: string,
};
type Props = {
action1: Function,
action2: Function,
action2: Function,
reduxStateItem1: string,
reduxStateItem2: Array<Object>,
} & OwnProps;
type AllProps = Props & OwnProps;
type State = {
localStateItem1: boolean
};
class FullPanel extends Component { //also tried <void, AllProps, State>
props: AllProps;
state: State;
constructor(props) {
super(props);
this.state = {
stateItem1: true,
};
}
...//other stuff
}
const mapStateToProps = (state: ReduxState) => {
return {
reduxStateItem1: state.reduxState1,
reduxStateItem2: state.reduxState2,
};
};
const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
action1,
action2,
action3,
}, dispatch);
const connector: Connector<OwnProps, Props> = connect(
mapStateToProps,
mapDispatchToProps
);
export default connector(FullPanel);
The issue is that for OwnProps, each prop is throwing an error: "Property not found in object literal". I can mark them as optional and it won't throw an error then, but it sort of becomes pointless (besides letting people know what the prop should be).
There is a functional component outside of this file that is rendering FullPanel and passing in the props (OwnProps). Props should just be the what's being injected from mapStateToProps and mapDispatchToProps.
There are ways to get the error to go away but then no matter what I put as the type (example: changing ownProp2 to number), flow always passes.
If anyone has any insight to this specific problem, or if anyone could explain why "Property not found in object literal" is being thrown here, that'd be really helpful. Thanks.
Edit: https://github.com/reactjs/redux/issues/2207 - This suggested the Props and OwnProps join.