我在一个页面上使用具有多种不同表单的Redux表单,我需要它们保持单独的表单。我希望能够提交其中一个并链接以验证并提交所有其他表单。如果其中任何一个无效,则不应提交任何内容。
我目前正在尝试使用remote submit和Form组件来实现此目的。我也在使用redux-thunk。但是,我遇到了麻烦,因为提交操作不是一个可以在解决后链接的承诺 - 相反,redux-form会触发内部的各种操作,而这些操作我没有真正的方法可以利用。我试图通过将我的提交包装在Promise中来解决这个问题,但是在其他表单提交之前它没有机会完成(并且更改了我的应用程序的页面)。这是我正在尝试的:
第一表格
class FirstForm extends Component {
submit = (values) => {
// do stuff with values here
}
render() {
return (
<Form onSubmit={handleSubmit(this.submit)}>
<Field ... />
</Form>
);
}
}
export default reduxForm({ form: 'firstForm', validate })(FirstForm);
第二表格
class SecondForm extends Component {
submit = (values) => {
// fire off bound action
this.props.submitSecondForm(values);
}
render() {
return (
<Form onSubmit={handleSubmit(this.submit)}>
<Field ... />
</Form>
);
}
}
export default reduxForm({ form: 'secondForm', validate })(SecondForm);
actionCreators.js
import { submit } from 'redux-form';
// wrap first submit in Promise so that is is chainable
function submitFirstForm(dispatch) {
return new Promise(resolve => {
dispatch(submit('firstForm'));
resolve(); // <-- want to resolve AFTER firstForm successfully submits
});
}
// use redux-thunk to submit firstForm and then call secondForm action afterwards
export function submitSecondForm(values) {
return dispatch => {
submitFirstForm(dispatch).then(() => {
dispatch(actionNeededForSecondFormSubmit).then(() => {
// all finished!
});
});
}
}
有了这个,有人应该能够使用远程提交并致电submit('secondForm')
并让它完成这两个动作。但是,因为我{1}}承诺立即在第一个动作创建者,它不会等到第一个形式完成。通过这种设计,一般流程将是:
resolve()
也许这不是最好的设计。我很高兴重新考虑设计,只要最终行为是两个表单都试图提交,如果其中一个表单失败,则提交失败。我也没有和redux-thunk结婚并愿意使用其他库。我曾经考虑过尝试使用redux-saga来屈服于一些redux-form内部动作,但这听起来令人难以置信的hacky并且根本不是一个好的设计模式。有谁知道如何做到这一点?