Cannot determine how to use Redux and React-router on the same component

Question

I am starting to learn typescript and the is a behaviour that I don't understand.

I got this error:

Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'void | RouteComponentProps<any>'.
      Type '{}' is not assignable to type 'RouteComponentProps<any>'.

Here is my App component :

interface AppProps extends React.Props<void> {
  todos: TodoItemData[];
  actions: typeof TodoActions;
};

interface AppState {
  /* empty */
}

class App extends React.Component<AppProps, AppState>{
  render() {return (<div></div>);
  }
}

function mapStateToProps(state: RootState) {
  return {
    todos: state.todos
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions as any, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

If I change in the declaration of my App component AppProps by void or React.Props I got no errors but I always have one with AppProps.

I don't understang why it's not working, AppProps is extending from React.Props. Did you see the mistake ?

Terce

React-router v4 typings are pretty new. I see that they use something like RouteComponentProps interface in props. To proper use them check their tests - github.com/DefinitelyTyped/DefinitelyTyped/tree/master/… – Brandnew

It would help (and clarify) if you specified which version of react-router you're using. – Dutra

Answer 1

I ran into a similar problem with [email protected].

I fixed it by extending my AppProps interface with RouteComponentProps interface, so in your case the AppProps interface would look like this:

import { RouteComponentProps } from 'react-router';
...

interface AppProps extends RouteComponentProps<any> {
  todos: TodoItemData[];
  actions: typeof TodoActions;
}

Valdes

Answer 2

Based on this answer on GitHub, this may work:

export default connect< AppProps, {}, {} >(
  mapStateToProps,
  mapDispatchToProps
)(App);

Horoscope

Answer 3

This has to do with react-router and redux you have to add types to your connect function:

interface AppProps {
  todos: TodoItemData[];
};

interface DispatchProps { 
  actions: typeof TodoActions;
}


interface AppState {
  /* empty */
}

class App extends React.Component<AppProps & DispatchProps & RouteComponentProps, AppState>{
  render() {return (<div></div>);
  }
}

function mapStateToProps(state: RootState) {
  return {
    todos: state.todos
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions as any, dispatch)
  };
}

export default connect<AppProps, DispatchProps, RouteComponentProps<any>(
  mapStateToProps,
  mapDispatchToProps
)(App);

Cohune