React Redux 表单和连接语法 [英] React Redux form and connect syntax

问题描述

我有一个 React 组件

I have a React component

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

可以看出它连接到 Redux 并且运行良好

And as can be seen it connects to Redux and it works perfectly well

我有 Redux 表单

I have Redux Form as

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

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

这再次运行得非常好.

我的问题是，我无法计算出让 Redux 表单也使用连接语句的语法，例如connect(select, actions)

My question is , I can't work out the syntax to have the Redux form also to use the connect statement e.g. connect(select, actions)

像这样的东西?

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

推荐答案

由于 connect 方法装饰了原始组件，并返回了一个装饰过的组件，因此您可以将该组件传递给 reduxForm(Redux 表单常见问题解答).

Since the connect method decorates the original component, and returns a decorated component, you can pass that component to reduxForm (Redux Form FAQ).

您可以在文档中查看示例.

You can see an example in the docs.

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:

If you need to get data from the store, for example - to create the form's initial values from the state, you can wrap the original component with redux-form, and pass the "form" component to connect:

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

或者你可以使用带有 compose 方法的函数式组合(来自 redux/lodash/ramda 为例)，调用reduxForm，然后在组件上connect:

Or you can use functional composing with a compose method (from redux/lodash/ramda for example), to call reduxForm, and then connect on the component:

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

这篇关于React Redux 表单和连接语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！