As a new user, I am facing a particular challenge. I am working with a Higher Order Component (HoC) that injects properties into a wrapped component. The HoC itself returns a React.ComponentClass that is connected to the redux store with mapped and dispatched properties.
When trying to use the HoC with a component that is also connected to the redux store, I observed that all properties within the wrapped component are initialized except for the dispatch properties, which are showing up as undefined. I am puzzled by why the dispatch properties are undefined in the wrapped component?
For my implementation, I am utilizing react-redux 7.1 and deriving the mapped and dispatched properties with the ConnectedProps react-redux type.
Higher Order Component
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';
// Code for the Higher Order Component
Wrapped Component
// Code for the Wrapped Component
Updated 26/11/2019 In response to a comment, I have set up a codesandbox example here. The issue did not occur in the codesandbox, so I will further investigate in my original codebase. As a new react-redux user, any feedback on whether I am correctly connecting to the redux store in the higher order component and base component in the codesandbox code would be highly appreciated.
I am also facing another issue, as explained in the readme file of the codesandbox, for which I will be raising a separate question.