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

Question

I am starting to learn typescript, and this is a behavior that I do not 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 application 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 changed the app’s App Approprop ad to void or React.Props, I didn’t have any errors, but I always have the AppProps app.

I do not understand why it does not work, AppProps is distributed from React.Props. Have you seen the mistake?

Answer 1

I had a similar problem with react-router@4.1.1.

I fixed it by extending the AppProps interface using the RouteComponentProps interface, so in your case the AppProps interface will look like this:

 import { RouteComponentProps } from 'react-router'; ... interface AppProps extends RouteComponentProps<any> { todos: TodoItemData[]; actions: typeof TodoActions; } 

Answer 2

Based on this answer on GitHub , this might work:

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

Answer 3

This is due to the reaction-router and shortening, you have to add types to your connection 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);