For react-redux it's usually enough to add types for Props and OwnProps.
Before:
type Props = {
item: Array<Item>,
otherItems: Array<OtherItem>,
value?: string,
onChange: (itemId: string) => void,
openModal: (item: Item) => void
};
export const Component = (props: Props) => <div/>
const mapStateToProps = (state: State) => ({
otherItems: getOtherItems(state)
});
// $FlowSuppress
export default connect(mapStateToProps)(Component);After:
type OwnProps = {|
item: Array<Item>,
value?: string,
onChange: (itemId: string) => void,
openModal: (item: Item) => void
|};
type StateProps = {| otherItems: $ReadOnlyArray<OtherItem> |};
type Props = {|
...OwnProps,
...StateProps,
dispatch: Dispatch<any> // If you can type your action more precisely, use that type instead of `any`
|};
export const Component = (props: Props) => <div/>
const mapStateToProps = (state: State): StateProps => ({
otherItems: getOtherItems(state)
});
export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps)(
Component
);OwnProps are the props passed from the outside world to ConnectedComponent, and Props are the props that ConnectedComponent passes to WrappedComponent. This means that Props should usually contain all the fields in OwnProps and new fields added by the connect() prop mappers (mapStateToProps etc).
- Instructions for react-redux: flow-typed/flow-typed#3012 (comment)
- very good tutorial for the migration: https://dev.to/wgao19/quick-note-fixing-connect-flowtype-annotation-after-089-joi
- exmamples: https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connect.js#L156
- some other resources:
- How facebook migrated past 0.84.0: https://medium.com/@samgoldman/ville-saukkonen-thanks-and-thanks-for-your-thoughtful-questions-24aedcfed518
- Background: https://medium.com/flow-type/asking-for-required-annotations-64d4f9c1edf8