Redux Connect with Typescript Error

Question

I'm implementing redux into a new project, and everything has gone well up until I've connected the app using connect()(App). I'm getting the following Typescript error and can't seem to figure how to type it correctly.

(13,16): Property 'dispatch' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

The following is my app code.

import * as React from 'react';
import { connect } from 'react-redux';
import { handleInitialData } from '../../actions/shared';


import './App.css';

const logo = require('./logo.svg');

class App extends React.Component {
  
  componentDidMount() {
    this.props.dispatch(handleInitialData());
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default connect()(App);

Shyam Kumar · Accepted Answer · 2018-04-02 07:26:06Z

2

From the code what I find is that

this.props.dispatch(handleInitialData()); // this wont work

function mapDispatchToProps(dispatch){
    return bindActionCreators({  // please import bindActionCreators from redux
       // here you write your actions
         dispatch: handleInitialData 
    },dispatch)
}



function mapStateToProps(state){
    return {
               //redux state
    }
}



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

answered Apr 2, 2018 at 7:26

Shyam Kumar

15810 bronze badges

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

2 Comments

George Kemp Over a year ago

Thanks for the answer but this doesn't solve the typescript issues.

Shyam Kumar Over a year ago

instead of using this.props.dispatch(handleInitialData()); use this.props.dispatch(); after modifying the code

Collectives™ on Stack Overflow

Redux Connect with Typescript Error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related