How to access redux in a new react class component - reactjs

Question

In App I have a button that saves a message and another that creates a new component
import React from "react";
import { connect } from "react-redux";
import { AppState } from "./redux/store";
import { ChatState } from "./redux/chat/types";
import { sendMessage } from "./redux/chat/actions";
import Test from './components/test'
interface AppProps { sendMessage: typeof sendMessage; chat: ChatState }
const App: React.FC<AppProps> = (props: AppProps) => {
const { sendMessage } = props;
const AddChat = () => {
sendMessage({ user: "John", message: "Message one", timestamp: new Date().getTime() });
};
const AddNode = () => {
const newNode = new Test();
// ^ Error
};
return(
<React.Fragment>
<button onClick={AddChat}>Add Chat</button>
<button onClick={AddNode}>Add Node</button>
</React.Fragment>
);
}
const addState = (state: AppState) => ({ chat: state.chat });
const ReduxConnect = connect(addState, { sendMessage }) (App)
export { ReduxConnect as App} ;
The error here is
(alias) const Test: ConnectedComponent<typeof Test, Pick<{}, never>>
import Test
----------------
Expected 1 arguments, but got 0.ts(2554)
index.d.ts(324, 10): An argument for 'props' was not provided.
So what is it expecting? How can I find out? The constructor doesn't have props, does it want me to declare some, pass some into the new component or what? I'm just not that familiar with class-based components when it comes to redux
The Test component looks like
import { Component } from 'react'
import { connect } from 'react-redux'
import { AppState } from "../redux/store";
import { ChatState } from "../redux/chat/types";
import { sendMessage } from "../redux/chat/actions";
class Test extends Component {
constructor() {
super();
}
render() {
return null
}
}
const mapDispatchToProps = {
sendMessage
}
export default connect(null, mapDispatchToProps)(Test);
I want to be able to sendMessage and get state from this new component
UPDATE
Changing the class component to this fixes the previous but gives a new error
import { Component } from 'react'
import { connect } from 'react-redux'
import { AppState } from "../redux/store";
import { ChatState } from "../redux/chat/types";
import { sendMessage } from "../redux/chat/actions";
interface AppProps { sendMessage: typeof sendMessage; chat: ChatState }
class Test extends Component {
constructor(props: AppProps) {
super();
}
render() {
return null
}
}
const addState = (state: AppState) => ({ chat: state.chat });
const ReduxConnect = connect(addState, { sendMessage }) (Test)
// ^ Error
export { ReduxConnect as Test} ;
and the error is
Argument of type 'typeof Test' is not assignable to parameter of type 'ComponentType<never>'.
Type 'typeof Test' is not assignable to type 'ComponentClass<never, any>'.
Type 'Test' is not assignable to type 'Component<never, any, any>'.
Types of property 'props' are incompatible.
Type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'never'.ts(2345)
When I hover over new Test I get

Answer 1

You're connecting your Test component to Redux -- which wants to pass in props -- yet you're not accepting any constructor params, so they're not getting passed in. If you just omit your constructor override I think this will work.
EDIT:
class Test extends Component<{}> {
constructor(props = {}) {
super(props);
}
render() {
return null
}
}
I think this default prop param will now mean you don't have to send in a {} when instantiating Test.