React typescript extending a container

Question

I'm trying to create a base class, wrap that in a container, and then extending this within my other components.

Here is a simplified example:

let state = new State();
class Base extends React.Component<{}, {}> {

}

const Container = state.connect(
    () => {
        return {

        }
    },
    () => {
        return {

        }
    }
)(Base);

class S extends Container {

}

This, however, is returning an error:

`error TS2507: Type 'any' is not a constructor function type.`. 

If I extend the Base directly, it works fine, but then how would I get access to the state and dispatch actions that I'd put into the container?

UPDATE

I created the following interface (omitting templates for simplicity)

interface IState {
    connect: (
        mapStateToProps: () => any,
        mapDispatchToProps: () => any,
    ) => (component: typeof React.Component) => typeof React.Component
} 

let state: IState = new State();

Now class extension does not throw any error. However, the original Base class is never called! Only the constructor of the Connect method is called.

The idea here is that I will have an abstract component and container (all the dispatch actions are on the container). And I can then extend this component from my other classes. However, since the container contains all the dispatch actions, then I need to extend the container, not the component.

Answer 1

I think you can reuse the value returned by state.connect() .

let state = new State();
class Base extends React.Component<{}, {}> {
}

class S extends Base {
}

const containerFactory = state.connect(
    () => {
        return {}
    },
    () => {
        return {}
    }
);

const BaseContainer = containerFactory(Base);
const SContainer = containerFactory(S);