Flow: What is the official way to type connect ( from flow-typed/react-redux) after 0.85?

[MaximeHeckel]

I recently updated to the latest version of flow. I keep looking around, whether it's docs, existing issues, library definition but I can't find anything to answer my question:
How do I type connect after flow 0.85?
I'm on flow 0.93 now, my react-redux type definition from flow-typed is up to date, and I just keep having the following issue:

Missing type annotation for OP. OP is a type parameter declared in function
type [1] and was implicitly instantiated at call of connect [2].

     src/views/component/myStuff/index.js
      83│   }
      84│ }
      85│
 [2]  86│ const MyStuff = connect(mapStateToProps, mapDispatchToProps)(
      87│   reduxForm({ form: FORM_NAME })(injectIntl(DefaultCollection)),
      88│ );
      89│

     flow-typed/npm/react-redux_v5.x.x.js
 [1] 131│   declare export function connect<-P, -OP, -SP, -DP, S, D>(
     132│     // If you get error here try adding return type to your mapStateToProps function
     133│     mapStateToProps: MapStateToProps<S, OP, SP>,
     134│     mapDispatchToProps: DP,
     135│     mergeProps?: null | void,
     136│     options?: ?Options<S, OP, SP, MergeOPSPDP<OP, SP, DP>>,
     137│   ): Connector<P, OP, MergeOPSPDP<OP, SP, $ObjMap<DP, Bind<D>>>>;

I'm pretty desperate at this point to make it work, every flow update has been painful but this one is perhaps the most complex one I've had to do in a while. I've found many answers but none of them seem to work or are outdated.
I'm probably not the only one stuck on this one, it would be nice to have more migration guides when that kind of breaking changes happens.

[jamesisaac]

Have a look at the tests alongside the flow-typed libdef. That's the best way to see up-to-date recommended practices: https://github.com/flow-typed/flow-typed/blob/master/definitions/npm/react-redux_v5.x.x/flow_v0.89.x-/test_connectDispatch.js

I don't personally use mapDispatchToProps (find it easier to just pass dispatch as a prop and create the actions where needed, seeing as usages can be checked with Dispatch / Action types), but with just mapStateToProps I do it like this:

type OwnProps = $ReadOnly<{|
  comingFromOutside: string,
|}>;

type Props = $ReadOnly<{|
  ...OwnProps,
  comingFromConnect: string,
  dispatch: Dispatch,
|}>;

function MyComponent(props: Props) {
  // ...
}

export default connect<Props, OwnProps, _, _, _, _>((state: State) => ({
  comingFromConnect: state.foo,
})(MyComponent);

[MaximeHeckel]

Thank you, this makes immediately more sense
Are there any plans to update the current documentation for Redux?

Also it looks like there are some other dependencies involved with this update right?
This is what I'm getting, despite updating to the latest version of eslint-plugin-flowtype

error  in ./src/views/MyStuff/index.js

Syntax Error: SyntaxError: Unexpected token, expected ; (85:28)

  83 | }
  84 |
> 85 | export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps, mapDispatchToProps)(
     |                             ^
  86 |   reduxForm({ form: FORM_NAME })(injectIntl(MyStuff)),
  87 | );
  88 |

Additionally the _ are highlighted by eslint as not defined

[Hypnosphi]

In my case, most of the times passing six wildcards just work:

connect<*, *, *, *, *, *>(mapStateToProps, mapDispatchToProps)

I'm using latest Flow and [email protected] definition from flow-typed

[jamesisaac]

Are there any plans to update the current documentation for Redux?

Good point. The flow-typed react-redux definitions have been iterating pretty fast, so the flow.org documentation could probably do with an update.

Also it looks like there are some other dependencies involved with this update right?

Yeah type-hinting functions like that is a recent syntax development, so you'll need something up-to-date. I'm using babel-eslint (10.0.1) as the parser defined in eslintrc. I think that will solve _ undefined errors too if _ now has special meaning in Flow generics.

In my case, most of the times passing six wildcards just work:

They're recommending against wildcard usage now (on grounds of it significantly slowing down typechecking), I think it's going to be removed at some point soon. I think the underscore has different semantics, although not completely sure as I haven't seen much discussion of it.

[jbrown215]

_ is equivalent to not passing a type argument. So connect<_,_,_,_,_,_>(mapStateToProps, mapDispatchToProps) is _exactly equivalent_ to connect(mapStateToProps, mapDispatchToProps).

When you don't pass type arguments, Flow implicitly instantiates a type variable an passes that to the call. So connect(mapStateToProps, mapDispatchToProps) becomes:

let A, B, C, D, E, and F be fresh type variables: connect<A,B,C,D,E,F>(mapStateToProps, mapDispatchToProps)

_ lets you explicitly specify some arguments, but let Flow do implicit instantiation for _only_ the ones you use _ for.

Closing this issue as the discussion here about redux typings are better suited to the flow-typed repo.

[MaximeHeckel]

@jamesisaac

Yeah type-hinting functions like that is a recent syntax development, so you'll need something up-to-date. I'm using `babel-eslint` (`10.0.1`) as the parser defined in eslintrc. I think that will solve `_ undefined` errors too if _ now has special meaning in Flow generics.

I'm on "flow-bin": "0.89.0" "@babel/core": "7.3.3", "babel-eslint": "10.0.1", "eslint-plugin-flowtype": "3.4.2", and "eslint-loader": "2.1.2", and I' m still seeing this eslint error:

  85:41  error  '_' is not defined  no-undef
  85:44  error  '_' is not defined  no-undef
  85:47  error  '_' is not defined  no-undef
  85:50  error  '_' is not defined  no-undef

✖ 4 problems (4 errors, 0 warnings)

My eslint plugins list includes flowtype:

plugins: [
    'react',
    'react-intl',
    'prettier',
    'flowtype',
    'jsx-a11y',
    'react-hooks',
  ],

[jamesisaac]

@MaximeHeckel Very strange, the underscores don't trigger no-undef for me under the following setup:

"flow-bin": "^0.93.0" "@babel/core": "^7.3.3" "babel-eslint": "^10.0.1" "eslint-plugin-flowtype": "^3.4.2"

---
parser: babel-eslint
plugins: [flowtype, react, react-hooks]
extends:
  - eslint:recommended
  - plugin:flowtype/recommended
  - plugin:react/recommended

Not sure what further to suggest, sorry!

[motiko]

I'm on "flow-bin": "0.89.0" "@babel/core": "7.3.3", "babel-eslint": "10.0.1", "eslint-plugin-flowtype": "3.4.2", and "eslint-loader": "2.1.2", and I' m still seeing this eslint error:

  85:41  error  '_' is not defined  no-undef
  85:44  error  '_' is not defined  no-undef
  85:47  error  '_' is not defined  no-undef
  85:50  error  '_' is not defined  no-undef

✖ 4 problems (4 errors, 0 warnings)

Did you found solution to this?