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(select, actions)

是这样的吗？

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

Answer 1

由于 connect 方法修饰了原始组件，而 returns 修饰了组件，您可以将该组件传递给 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)

Answer 2

应用多个中间件是这样的：

middlewareB(middlewareA(Component))

你的情况：

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

Answer 3

您可以做的是在 redux 表单之上创建一个包装器 class 并将其连接到 redux。你可以简单地将 props 从包装器 class 传递给 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，因此将嵌套状态导入到组件属性中。）

这里的分别是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 表单和连接语法

React Redux form and connect syntax

ecmascript-6

reactjs

redux-form

react-redux