This suppress was added due to the high amount of type errors after updating Flow and adding the most recent libdefs for react-redux.
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 https://bit.ly/2Uvi2uU
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<*>
|};
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