Как получить доступ к избыточному в новом компоненте класса реакции

Question

В приложении у меня есть кнопка, которая сохраняет сообщение, и еще одна кнопка, которая создает новый компонент

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} ;

Ошибка здесь

(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.

Так чего же он ожидает? Как я могу узнать? У конструктора нет реквизита, он хочет, чтобы я объявил некоторые, передал некоторые в новый компонент или как? Я просто не очень хорошо знаком с компонентами на основе классов, когда речь идет о redux

Компонент Test выглядит как

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);

Я хочу иметь возможность отправитьMessage и получить состояние из этого нового компонент

ОБНОВЛЕНИЕ Изменение компонента класса на это исправляет предыдущий, но выдает новую ошибку

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} ;

, и ошибка

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)

При наведении на new Test я получаю

Answer 1

Вы подключаете свой Test компонент к Redux - который хочет передавать в реквизитах - но вы не принимаете никаких параметров конструктора, поэтому они не будут переданы. Если вы просто пропустите свой constructor override. Я думаю, что это сработает.

РЕДАКТИРОВАТЬ:

class Test extends Component<{}> {
  constructor(props = {}) {
    super(props);
  }

  render() {
    return null
  }
}

Я думаю, что этот параметр поддержки по умолчанию теперь означает, что вам не нужно отправлять {} при создании экземпляра Test.