反应Redux表单并连接语法 [英] React Redux form and connect syntax

问题描述

我有一个React组件

 导出类登录扩展了组件{..为清楚起见省略}导出默认的connect(select，actions)(Login); 

可以看出，它连接到Redux并运行得很好

我的Redux表单为

 导出类ChangePassword扩展了组件{..为清楚起见省略}导出默认的reduxForm({形式:"change_password_form"，证实})(更改密码); 

同样，它运行得很好.

我的问题是，我无法计算出让Redux格式也可以使用connect语句的语法，例如 connect(选择，操作)

像这样吗?

 导出默认reduxForm({形式:"change_password_form"，证实}).connect(select，actions)(ChangePassword) 

解决方案

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

您可以在文档中看到一个示例.

  const装饰组件= connect(选择，操作)(ChangePassword)导出默认的reduxForm({形式:"change_password_form"，证实})(DecoratedComponent) 

或直接通过它:

 导出默认reduxForm({形式:"change_password_form"，证实})(connect(select，actions)(ChangePassword)) 

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

 导出默认连接(选择，操作)(reduxForm({形式:"change_password_form"，证实})(更改密码)) 

或者您也可以将函数编写与 compose 方法一起使用(来自 redux / lodash / 解决方案

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)

Or pass it directly:

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

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

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)

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