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

如果您需要从商店获取数据，例如 - to create the form's initial values from the state，您可以使用redux-form包装原始组件，并传递＆＃34;表单＆＃34;组件connect：

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

Answer 2

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

middlewareB(middlewareA(Component))

在你的情况下：

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

Answer 3

您可以做的是在redux表单上创建一个包装类，并将其连接到redux。您可以简单地将该包装类中的道具传递给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);

Answer 4

我可以保证这项工作可行，TypeScript在这里是可选的：

（我正在使用CombineReducer，因此将嵌套状态导入到组件props中。）

这里分别是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))

React Redux表单并连接语法

4 个答案: