Question

我在一个页面上使用具有多种不同表单的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并且根本不是一个好的设计模式。有谁知道如何做到这一点？

如何在Redux Form v6中链接多个远程提交

0 个答案: