title: React Redux: Cannot read property 'dispatch' of undefined
body: <p>I have been working on this for long but didn't find a solution:</p>
  
  <p>I get <code>Cannot read property 'dispatch' of undefined</code> whenever the <code>handleInputChange</code> function is called.</p>
  
  <p>This is the basic layout of my app:</p>
  
  <pre><code>App.tsx
  
  import * as React from 'react';
  import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
  
  import SuperSignupScreen from './screens/SuperSignupScreen'
  
  import './App.css';
  import {connect, Dispatch} from "react-redux";
  
  
  export type SessionProps = {
  }
  
  class AppImpl extends React.PureComponent&lt;SessionProps &amp; { dispatch: Dispatch&lt;{}&gt; }, {}&gt; {
    render() {
        return(
            &lt;Router&gt;
              &lt;Switch&gt;
                  &lt;Route path="/superSignup" component={SuperSignupScreen}/&gt;
                   &lt;Route key="404" component={NotFoundScreen} /&gt;
              &lt;/Switch&gt;
            &lt;/Router&gt;
        )
    }
  }
  
  function mapStateToProps(state: { session: SessionProps }): SessionProps {
      return state.session;
  }
  
  
  const App = connect(mapStateToProps)(AppImpl);
  
  export default App;
  </code></pre>
  
  <p>and this is SuperSignupScreen:</p>
  
  <pre><code>    import * as React from "react";
  import {TextField, RaisedButton} from 'material-ui';
  import {connect, Dispatch} from "react-redux";
  import {SuperSignup, updateForm} from "../actions/SuperSignupActions";
  
  export type SignupScreenProps = {signup: SuperSignup};
  
  class SuperSignupScreenImpl extends React.PureComponent&lt;HomeScreenProps &amp; {dispatch: Dispatch&lt;{}&gt;}, {}&gt; {
      render() {
  
          return(
  
                  &lt;TextField
                  hintText = "Name"
                  onChange = {this.handleInputChange}
                  name = "name"
              &gt;
  
  
                  &lt;/TextField&gt;
                      &lt;RaisedButton label="Submit" primary={true}/&gt;
  
          );
      }
      handleInputChange(event){
          const target = event.target;
          const value = target.value;
          this.props.dispatch(updateForm(value));
      }
  }
  
  function mapStateToProps(state: {signup: SuperSignup}): SignupScreenProps {
      return {signup: state.signup};
  }
  
  const SuperSignupScreen = connect(mapStateToProps)(SuperSignupScreenImpl);
  
  export default SuperSignupScreen;
  </code></pre>
  
  <p>and this is index.js:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import {applyMiddleware, combineReducers, createStore} from 'redux';
  import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import getMuiTheme from 'material-ui/styles/getMuiTheme';
  
  import './index.css';
  import App from './App';
  import thunk from "redux-thunk";
  
  const rootReducer = combineReducers({
  
  });
  
  const store = createStore(rootReducer, applyMiddleware(thunk));
  
  ReactDOM.render((
      &lt;Provider store={store}&gt;
          &lt;MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}&gt;
              &lt;App/&gt;
          &lt;/MuiThemeProvider&gt;
      &lt;/Provider&gt;
  
  ), document.getElementById('root'));
  </code></pre>
  
  <p>I've spent a good time trying to understand the issue, would be grateful if you can help.</p>