React Redux 表单和连接语法答案

【问题标题】：React Redux form and connect syntaxReact Redux 表单和连接语法
【发布时间】：2018-03-29 04:57:57
【问题描述】：

我有一个 React 组件

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

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

我有 Redux Form

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

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

再一次，这工作得很好。

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

这样的？

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

【问题讨论】：

标签： reactjs ecmascript-6 react-redux redux-form

【解决方案1】：

我可以保证这是可行的，TypeScript 在此是可选的：

（我使用的是 combineReducer，因此将嵌套状态导入到组件道具中。）

这里的分别是mapStateToProps、导入的Action Creators和用Redux Form包裹的React Component。

const mapStateToProps = (state: any) => ({
  currentItems: state.itemsReducer.currentItem,
  initialValues: state.itemsReducer.currentItem,
  keepDirtyOnReinitialize: true,
});

//ReduxForm decorator populates the initialValues prop 
//from Connect into Field components with its library functionality:
export default connect<any, any, any>(mapStateToProps, {
  CreateItem,
  UpdateItem,
  getItemById
})(reduxForm({
  form: 'ItemsForm'
})(AddItemToList))

【讨论】：

【解决方案2】：

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

如果需要从store中获取数据，例如-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，然后在组件上调用connect：

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

【讨论】：

谢谢，我用过 .而不是 ()，我使用了您示例中的直接语句
欢迎。我添加了另一个使用 connect 包装表单的示例。
当我使用最后一个选项时，因为我需要将数据从 state 获取到 redux-form，我得到这个错误：Uncaught Invariant Violation: You must pass a component to the function returned by connect.
@Bromox 以及遇到此问题的每个人：不过我找到了解决方案。我在我的帖子中描述了它，所以我希望它会帮助你，你会理解发生了什么 - codemenatalie.com/blog/connecting-redux-form-and-connect/

【解决方案3】：

您可以做的是在 redux 表单上方创建一个包装类并将其连接到 redux。您可以简单地将 props 从该包装类传递到 redux 表单。像这样的：

//redux form
export class ChangePassword extends Component {
  ..omitted for clarity
}

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

// wrapper class
export class FormWrapper extends React.Component {
  // omitted for clarity
}

export default connect(select, actions)(FormWrapper);

【讨论】：

【解决方案4】：

应用多个中间件的工作方式如下：

middlewareB(middlewareA(Component))

在你的情况下：

export default connect(select, actions)(reduxForm({})(ChangePassword))

【讨论】：