React Redux表单并连接语法

Question

我有一个React组件

export class Login extends Component {
      ..omitted for clarity
}
export default connect(select, actions)(Login);

可以看出它连接到Redux并且它运行得非常好

我有Redux表格

export class ChangePassword extends Component {
  ..omitted for clarity
}

export default reduxForm({
  form: 'change_password_form',
  validate
})(ChangePassword);

这再次非常有效.

我的问题是,我无法弄清楚Redux表单也使用connect语句的语法,例如 connect(select, actions)

像这样的东西？

export default reduxForm({
  form: 'change_password_form',
  validate
}).connect(select, actions)(ChangePassword)

Answer 1

由于该connect方法修饰了原始组件并返回了一个修饰组件,因此您可以将该组件传递给reduxForm(Redux Form FAQ).

你可以看到一个例子.

const decoratedComponent = connect(select, actions)(ChangePassword)

export default reduxForm({
  form: 'change_password_form',
  validate
})(DecoratedComponent)

或直接传递:

export default reduxForm({
  form: 'change_password_form',
  validate
})(connect(select, actions)(ChangePassword))

如果您需要从商店获取数据,例如 - 要从状态创建表单的初始值,您可以使用redux-form包装原始组件,并将"form"组件传递给connect:

export default connect(select, actions)(reduxForm({
  form: 'change_password_form',
  validate
})(ChangePassword))