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 ?

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/… — niba
– niba, Commented Mar 24, 2017 at 17:20
It would help (and clarify) if you specified which version of react-router you're using. — nbkhope
– nbkhope, Commented Mar 24, 2017 at 19:06

k2rks · Accepted Answer · 2017-05-31 08:17:20Z

2

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;
}

answered May 31, 2017 at 8:17

k2rks

2612 silver badges9 bronze badges

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

Comments

Izhaki · Accepted Answer · 2017-03-27 16:56:42Z

0

Based on this answer on GitHub, this may work:

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

answered Mar 27, 2017 at 16:56

Izhaki

23.6k9 gold badges72 silver badges107 bronze badges

Comments

JimT · Accepted Answer · 2017-07-07 13:17:56Z

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);

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related