CODEWITHSUNDEEP
reactjstypescriptredux
George Kemp
George Kemp

Reputation: 631

Redux Connect with Typescript Error

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

Upvotes: 0

Views: 437

Answers (1)

Shyam Kumar
Shyam Kumar

Reputation: 158

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

Upvotes: 2

Related Questions