Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
MaximeHeckel opened this issue Feb 21, 2019 · 7 comments

Comments

Projects
None yet
4 participants
@MaximeHeckel
Copy link

commented Feb 21, 2019

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

This comment has been minimized.

Copy link
Collaborator

commented Feb 21, 2019

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

This comment has been minimized.

Copy link
Author

commented Feb 21, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Feb 21, 2019

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

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

I'm using latest Flow and react-redux@5.x.x definition from flow-typed

@jamesisaac

This comment has been minimized.

Copy link
Collaborator

commented Feb 21, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Feb 21, 2019

_ 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.

@jbrown215 jbrown215 closed this Feb 21, 2019

@MaximeHeckel

This comment has been minimized.

Copy link
Author

commented Feb 21, 2019

@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

This comment has been minimized.

Copy link
Collaborator

commented Feb 22, 2019

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.