How to pass props down in react-redux-typescript

Question

I am trying to figure out how to pass down props into components when using typescript.

The error I receive if I try to pass down any prop anywhere, whether it be local state or anything but {...this.props}. But if I pass down this.props, I don't get anything that I want on the other end. Instead I get history, location, match with their applicable defaults and staticContext: undefined. If I try to pass down actions, as in my example below, then it will be undefined.

The error I get as a result is

client:157 [at-loader] ./src/containers/App/index.tsx:25:31 TS2339: Property 'actions' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Home> & Readonly<{ children?: ReactNode; }> & Read...'.

My App.tsx is below:

import * as React from 'react';
import * as HomeActions from '../../actions/home';
import * as style from './style.css';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { RootState } from '../../reducers';
import Home from '../../components/Home';

export namespace App {
  export interface Props extends RouteComponentProps<void> {
    actions: typeof HomeActions
  }

  export interface State {
    /* empty */
  }
}

export class App extends React.Component<App.Props, App.State> {

  render() {
    return (
      <div>
        <Home {...this.props} actions={this.props.actions}/>
        {this.props.children}
      </div>
    );
  }
}

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

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

connect(mapStateToProps, mapDispatchToProps);

In the home component, when I log this.props.actions in onComponentDidMount(){} then I get undefined.

did you get any solution ?

Mukund Kumar
– Mukund Kumar

2018-01-25 06:00:48 +00:00
Commented Jan 25, 2018 at 6:00 — Mukund Kumar
– Mukund Kumar, Commented Jan 25, 2018 at 6:00

Piotr Białek · Accepted Answer · 2017-12-02 22:05:44Z

1

You should pass your component to connect and export connected component instead of just component.

export connect(mapStateToProps, mapDispatchToProps)(App);

answered Dec 2, 2017 at 22:05

Piotr Białek

2,7571 gold badge19 silver badges27 bronze badges

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

1 Comment

Brandon Over a year ago

I refactored the below, should have done that earlier so thanks. However I still receive the same error as described above when I try to pass in new props (style, classname, action, anything really).

Collectives™ on Stack Overflow

How to pass props down in react-redux-typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related