React Redux 表单和连接语法

IT技术 reactjs ecmascript-6 react-redux redux-form
2021-05-15 06:49:15

我有一个 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)
4个回答

由于该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 中获取数据,例如 -从 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)

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

middlewareB(middlewareA(Component))

在你的情况下:

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

我可以保证这是可行的,这里的 TypeScript 是可选的:

(我使用 combineReducer,因此嵌套状态导入到组件props中。)

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

您可以做的是在 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);