TypeScript、redux-form 和 connect [英] TypeScript, redux-form and connect

问题描述

首先，我对 TS、React & 很陌生.Redux，很抱歉，如果这是一个明显的问题.

First of all, I'm very new to TS, React & Redux, so sorry if this is an obvious question.

我正在尝试修改 这个示例 以获取要加载的表单一些信息.它使用 redux-form.

I'm trying to modify this example to get a form to load some information. It's using redux-form.

我正在尝试弄清楚如何在组件的导出中同时调用 connect 和 redux-form.现在它看起来像这样:

I'm trying to figure out how to call connect and redux-form at the same time in the export of the component. Right now it's looking like this:

class UserForm extends React.Component<IUserProps, void> { .. }

export default ReduxForm.reduxForm({
  form: 'user',
  fields: [
    'userName',
    'password',
    'firstName',
    'lastName',
    'email'
  ],
  validate: UserForm.validate,
})(UserForm);

我看到的没有 TS 的示例如下所示:>

The examples I've seen without TS look like this:

class MyForm extends Component {}
MyForm = reduxForm(config)(MyForm)
MyForm = connect(mapStateToProps, mapDispatchToProps)(MyForm)
export default MyForm

但是如果我尝试在 TS 中做同样的事情，我会收到 TS2300 错误:重复标识符.

But if I try to do the same in TS I get the TS2300 error: duplicate identifier.

我也尝试过使用 @connect 装饰器，但我无法让它工作(或在网上找到任何工作示例).

I've also tried to use the @connect decorator, but I couldn't make it work (or find any working example online).

推荐答案

你能把它们串起来吗?

class UserForm extends React.Component<IUserProps, void> { .. }

export default connect(mapStateToProps,mapDispatchToProps) 
    (ReduxForm.reduxForm({
  form: 'user',
  fields: [
    'userName',
    'password',
    'firstName',
    'lastName',
    'email'
  ],
  validate: UserForm.validate,
})(UserForm));

这篇关于TypeScript、redux-form 和 connect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！