title: Why is dispatch property undefined for a connected wrapped component within a connected Higher Order Component when using react-redux with typescript?
body: <p>I am new user struggling with the following issue. I have a Higher Order Component (Hoc) that injects properties to a wrapped component. The HoC itself returns a React.ComponentClass that is connected to the redux store with map and dispatch properties.</p>
  
  <p>I am trying to use the HoC with a component that is also connected to the redux store. Using console log output statements I can see that all properties within the wrapped component are initialised aside from the dispatch properties, which are undefined. I do not understand why the dispatch properties are undefined in the wrapped component????</p>
  
  <p>I am using react-redux 7.1 and deriving map and dispatch properties with the <code>ConnectedProps</code> react-redux type.</p>
  
  <p><strong>Higher Order Component</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import cuid from 'cuid';
  import React, { Component, ComponentType } from 'react';
  
  import { ConnectedProps } from 'react-redux';
  import { RouteComponentProps, withRouter } from 'react-router-dom';
  
  import { ApiErrorDialog } from './ApiErrorDialog';
  import { ApiErrorListenerComponentProps } from './types';
  import { connector } from './reduxConnect';
  
  /**
   * Type declarations
   */
  type HocState = {
    componentId: string;
  };
  
  type ReduxProps = ConnectedProps&lt;typeof connector&gt;;
  
  export const withReduxErrorListener = &lt;
    BaseProps extends ApiErrorListenerComponentProps
  &gt;(
    BaseComponent: ComponentType&lt;BaseProps&gt;,
  ) =&gt; {
    /**
     * Type declarations
     */
    type HocProps = BaseProps &amp; ReduxProps &amp; RouteComponentProps;
    type HocPropsExcludingBaseProps = Exclude&lt;HocProps, BaseProps&gt;;
  
    console.log(
      `withReduxErrorListener BaseProps =&gt; ${JSON.stringify(
        BaseComponent.displayName,
      )}`,
    );
  
    class ApiErrorListener extends Component&lt;HocProps, HocState&gt; {
      static displayName = `withReduxErrorListener(${BaseComponent.name})`;
      static readonly WrappedComponent = BaseComponent;
      /**
       * Some source code .....
       */
  
  
      render(): JSX.Element {
        const { ...restProps } = this.props;
        console.log('hoc render()');
  
        if (this.props.error.length &gt; 0) {
          return (
            &lt;React.Fragment&gt;
              /*{display custom error component here}*/
            &lt;/React.Fragment&gt;
          );
        } else {
          // display base component
          return (
            &lt;BaseComponent componentId={this.state.componentId} {...restProps} /&gt;
          );
        }
      }
    }
  
    const ConnectedHoc = connector(ApiErrorListener as any);
    const RoutedConnectedHoc = withRouter(ConnectedHoc as any);
    return RoutedConnectedHoc;
  };
  </code></pre>
  
  <p><strong>Wrapped Component</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>type StateProps = {
    isLoading: boolean;
    courses: courseModels.Course[];
  };
  
  /**
   * Redux dispatch and state mappings
   */
  const dispatchProps = {
    fetchCourses: apiCourseAction.request,
  };
  
  const mapStateToProps = (state: RootState): StateProps =&gt; ({
    isLoading: state.courses.isLoadingCourses,
    courses: courseSelectors.getReduxCourses(state.courses),
  });
  
  const connector = connect(
    mapStateToProps,
    dispatchProps,
  );
  
  type ReduxProps = ConnectedProps&lt;typeof connector&gt;;
  
  /**
   * Component property type definitions
   */
  type Props = ReduxProps &amp; ApiErrorListenerComponentProps; // &amp;RouteComponentProps;
  
  /**
   * CourseList component
   */
  const CourseListBase = ({
    courses = [],
    componentId,
    fetchCourses,
    isLoading,
  }: Props): JSX.Element =&gt; {
    // dispatch fetch course action on mount
    useEffect(() =&gt; {
      console.log('My properties are:=&gt; ');
      console.log(`courses :: ${JSON.stringify(courses)}`);
      console.log(`componentId :: ${componentId}`);
      console.log(`fetchCourses :: ${JSON.stringify(fetchCourses)}`);
  
      console.log('COURSELIST FETCHING COURSES');
      fetchCourses(requestFactories.getCourses(componentId));
    }, [fetchCourses]);
  
    if (isLoading) {
      return &lt;p&gt;Loading...&lt;/p&gt;;
    }
  
    return (
      &lt;div style={{ marginTop: 20, padding: 30 }}&gt;
        {
          &lt;Grid container spacing={2 as GridSpacing} justify="center"&gt;
            {courses.map(element =&gt; (
              &lt;Grid item key={element.courseID}&gt;
                &lt;Course course={element} /&gt;
              &lt;/Grid&gt;
            ))}
          &lt;/Grid&gt;
        }
      &lt;/div&gt;
    );
  };
  
  /**
   * Exports
   */
  
  const ConnectedCourseList = connector(withReduxErrorListener(CourseListBase));
  export default ConnectedCourseList;
  </code></pre>
  
  <p><strong>Updated 26/11/2019</strong>
  In response to comment, I have created a codesandbox <a href="https://codesandbox.io/s/react-redux-typescript-nested-connected-hoc-example-cuq6i" rel="nofollow noreferrer">here</a>. So far, the issue has not manifested in the codesandbox, so will investigate further in my original codebase. Being a new react-redux user, any feedback concerning if I am correctly connecting to the redux store in the higher order component and base component of the codesandbox code, would be appreciated. </p>
  
  <p>I am also experiencing a separate issue, detailed in readme file of code sandbox, for which I will raise a separate question. </p>