阵营终极版的形式和连接语法
问题描述:
我有一个阵营组件阵营终极版的形式和连接语法
export class Login extends Component {
..omitted for clarity
}
export default connect(select, actions)(Login);
而且可以看出它连接到终极版,它工作得很好
我有终极版形式
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)
答
由于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,你可以用与终极版形式的原始组件,并通过“形式“组件connect
:
export default connect(select, actions)(reduxForm({
form: 'change_password_form',
validate
})(ChangePassword))
答
应用多个中间件的工作原理是这样的:
middlewareB(middlewareA(Component))
你的情况:
export default connect(select, actions)(reduxForm({})(ChangePassword))
答
你可以做的是创造了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);
谢谢,我用过。代替(),我使用了欢迎词 – Rory
中的直接声明。我已经添加了另一个用于连接包装表单的示例。 –