reactjs - 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 语句的语法，例如连接(选择，操作)

类似这样的事情吗？

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

如果您需要从商店获取数据，例如 - to create the form's initial values from the state ，您可以用 redux-form 包装原始组件，并将“form”组件传递给 connect:

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

或者您可以使用带有 compose 方法的函数式组合(例如 redux/lodash/ramda)，调用 reduxForm，然后在组件上连接:

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  reduxForm({ form: 'change_password_form', validate })
)(ChangePassword)