Почему не работает @connect?

Question

[Meyz]

Пытаюсь настроить коннект к стору, тайпскрипт постоянно ругается на эту строчку

const mapStateToProps = (state: any) => {
  return { unreadMessages: state.unreadMessages };
}

const mapDispatchToProps = dispatch => {
  return {
    addMsgAction: msg => dispatch(addMessage(msg))
  }
}

@connect(mapStateToProps, mapDispatchToProps)
// ругается на @connect -
//Error:(28, 2) TS2345: Argument of type 'typeof MainLayout' is not assignable to parameter of type
//'Component<any, {}, any>'.
 // Property 'setState' is missing in type 'typeof MainLayout'.

export class MainLayout extends React.Component <IMainLayoutProps, IState> {
  constructor(props, context) {
    super(props, context);
  }

  public componentDidMount() {
  }

  public render() {
    const { children, match: { params } } = this.props;
    return (
      <div className={style.layout}>
        <Header page={params.page}/>
        <div className={style.page}>
          {children}
        </div>
        <Footer/>
      </div>
    );
  }
}

Answer 1

[Александр Начасик]

Не стоит использовать connect в качестве декоратора. Попробуйте так:

export default connect(mapStateToProps, mapDispatchToProps)(MainLayout);

Декораторы классов нужны для того, чтобы модифицировать поведение конструктора класса, поэтому TS требует строгого соответствия между декорируемым классом и результатом работы декорато-функции. В случае с connect происходит совсем другое: connect просто оборачивает компонент в компонент высшего порядка. Получается, что вместо модификации конструктора, декоратор-функция будет возвращать качествнно-новый класс.

Гайд по применению connect в TS

Comments

[Meyz]

Спасибо! Но, к сожалению, это не помогло)