Using redux connect function loses class information in my IDE (PhpStorm/WebStorm)

Question

Using the connect function from redux seems to make my IDE (PhpStorm) lose the ability to "Find Usages" on my classes. I assume because connect returns any, so import SomeClass from SomeClass.ts loses the type information from that file.

export default connect(mapStateToProps)(SomeClass);

From the redux docs:

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.

But I want my IDE to treat this as if it was my original class/component so it has all the type information.

One way I found how to fix this is by using annotations with @connect, but this requires me to put mapStateToProps & mapDispatchToProps functions above the class. I prefer to keep my class files fairly clean with the class at the very top of the file.

This gives Block-scoped variable 'mapSateToProps' used before its declaration import { connect } from 'react-redux'

@connect(mapStateToProps)
class TestClass {

}

const mapStateToProps = (state, props) => {

}

Is there a way for me to use connect, keep the class type information in my IDE, and have mapStateToProps either below the class or inside the class as static functions? Or just anywhere else in the same file?

I'm using TypeScript & Babel.

Ari Lotter · Accepted Answer · 2018-09-28 19:20:28Z

1

You could write mapStateToProps as a function instead, since when using the function keyword the declaration is hoisted

e.g.

function mapStateToProps(state: TypeOfYourRootStore, props: TypeOfYourComponentsProps) {}

edited Sep 28, 2018 at 19:20

answered Sep 28, 2018 at 18:57

Ari Lotter

61511 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Odie Over a year ago

Oh yup, that does it. Thank you! I guess I didn't think of this because mapDispatchToProps was an object, but it looks like I can use the function version of it instead.

Collectives™ on Stack Overflow

Using redux connect function loses class information in my IDE (PhpStorm/WebStorm)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related