Better use of TypeScript with React and Redux about rangle-starter HOT 8 OPEN

@bennett000 @yuri @winkerVSbecks @bertrandk @rbrander @andrejkn

from rangle-starter.

Current issues:

redux-react's connect typing won't accept a functional stateless component:

ERROR in ./src/containers/App.tsx
(73,3): error TS2345: Argument of type '({ children, session, login, logout }: { children: any; session: any; login: any; logout: any; })...' is not assignable to parameter of type 'typeof ElementClass'.
Type '({ children, session, login, logout }: { children: any; session: any; login: any; logout: any; })...' provides no match for the signature 'new (props?: any, context?: any): ElementClass'

from rangle-starter.

2: Same thing for reduxForm:

ERROR in ./src/components/LoginForm.tsx
(79,4): error TS2345: Argument of type '({
handleSubmit,
resetForm,
isPending,
hasError,
fields: {
username,
password,
...' is not assignable to parameter of type 'typeof ElementClass'.

from rangle-starter.

@SethDavenport official typings coming soon: reduxjs/redux#1413

from rangle-starter.

That's cool - I can work around (1) in the meantime by converting my containers to class components.

However redux-form typings have the same issue. I'm also expecting Radium to have it as well, although I haven't tried it yet. Actually not sure Radium even has typings...

from rangle-starter.

@winkerVSbecks - that PR is for redux, which is great. But I'm talking about connect() from react-redux.

  export function connect(mapStateToProps?: MapStateToProps,
                          mapDispatchToProps?: MapDispatchToPropsFunction|MapDispatchToPropsObject,
                          mergeProps?: MergeProps,
                          options?: Options): ClassDecorator;

We need an overload of this that doesn't return ClassDecorator, but rather something that can decorate StatelessComponent<P>

Might make a PR to DefinitelyTyped at some point.

from rangle-starter.

@SethDavenport yes, my bad. @bennett000 mentioned that DefinitelyTyped has kind of stalled at this point. Since, Redux is bringing typings into the main repo we should probably do the same for react-redux, etc.

from rangle-starter.

It would be good to include a pass-through property or two (properties provided by the parent component) in e.g. counter-page.tsx, since this takes a long time to puzzle out how to fix the first time. (For me, the solution was to create an IOwnProps interface for them:

interface IState  { tab: string }
interface IDispatch { onTabChange: (any)=>void }
interface IOwnProps { title:string }   
export class YnAppBarView extends Component<IState & IDispatch & IOwnProps, {}> {

... and then set it as ownProps on the connect:

const mapStateToProps =
    (state, props:IOwnProps)=>({
        myProp: state.yadayada      // e.g.
    })

but you may well have a better way to handle this!

from rangle-starter.