When I use the connect function from redux, it seems to hinder my IDE (PhpStorm) from "Find Usages" on my classes. This is likely because connect returns any, causing the type information from the imported SomeClass file to be lost.
export default connect(mapStateToProps)(SomeClass);The redux documentation states:
It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.
However, I want my IDE to recognize this as my original class/component so it retains all the type information.
I discovered that one way to address this is by using annotations with @connect, but this requires placing mapStateToProps and mapDispatchToProps functions above the class. I prefer to keep my class files clean with just the class at the top.
This results in achieving 'Block-scoped variable 'mapSateToProps' used before its declaration' import { connect } from 'react-redux'
@connect(mapStateToProps)
class TestClass {
}
const mapStateToProps = (state, props) => {
}
Is there a solution for me to utilize connect, maintain the class type information in my IDE, and have mapStateToProps placed either below the class or inside the class as static functions? Or perhaps anywhere else in the same file?
I am working with TypeScript and Babel.