Make Flow automatically detect props from mapDispatchToProps and mapStateToProps - redux

Question

I'm using Flow to provide some type-safety while developing my react-native app and I use redux.
This is an example for my typical smart-components connected to the redux store:
import React, { Component } from 'react'
type Props = {
user: User,
updateUser: User => void,
}
type State = {}
default class SmartComponent extends Component<Props, State> {
// My component methods
}
const mapStateToProps = (state, ownProps) => {
return {
...ownProps,
user: state.user
}
}
const mapDispatchToProps = dispatch => {
return {
updateUser: (user: User) =>
dispatch(updateUser(user)),
}
}
export default connect(
mapStateToProps,
mapDispatchToProps,
)(SmartComponent)
This works, but flow doesn't enforce compatibility between what I have in my Props and what I return in mapDispatchToProps or mapStateToProps: if I modify a function in mapDispatchToProps but I forget to manually update my Props, there are no errors from Flow but I could get an error at runtime.
It there a way or a best practice to make flow automatically understand the content of this.props from mapDispatchToProps and mapStateToProps, or at least to raise an error when they are different?

Answer 1

Here's one approach:
I would do return type on mapStateToProps and mapDispatchToProps and also introduce types for each and then combine them and pass it in as a prop to the component.
type CombinedProps = StateProps & DispatchProps;
const mapStateToProps = (state, ownProps): StateProps
const mapDispatchToProps = (dispatch):DispatchProps
That way flow should alert you on if something is missing.
This is Typescript way of doing things so I just replicated similar stuff in flow, syntax may be little bit different. May be your case also need to combine OwnProps with StateProps in which case you would need to introduce one more type in your code OwnProps and then combine that with StateProps but the idea is the same, you combine/intersect them and pass it over to the next consuming type.
import React, { Component } from 'react'
type StateProps = {
user: User,
}
type DispatchProps = {
user: User,
updateUser: User => void,
}
type CombinedProps = StateProps & DispatchProps;
type State = {}
default class SmartComponent extends Component<CombinedProps , State> {
// My component methods
}
const mapStateToProps = (state, ownProps): StateProps => {
return {
...ownProps,
user: state.user
}
}
const mapDispatchToProps = (dispatch):DispatchProps => {
return {
updateUser: (user: User) =>
dispatch(updateUser(user)),
}
}
export default connect(
mapStateToProps,
mapDispatchToProps,
)(SmartComponent)