Question

我整合了redux-form，正如文档建议的那样，一切正常。下一步我想向我的应用程序添加异步API调用，并将它们与redux-form创建的表单相结合。

像往常一样，我想从应用程序逻辑中分离出我的ui组件。 redux的做法是在组件中调度操作并在reducers中执行必要的逻辑。当您需要在actions / actionCreators中执行异步操作时，可以使用redux-thunk或其他库，例如redux-saga。

假设我想使用redux-thunk在actionCreators中使用异步api调用来更新我的应用程序状态。现在的问题是，如何将这与redux-form在onSubmit函数中给出的逻辑相结合？此函数假定您返回一个承诺来处理表单的状态，我找不到将其与通常的使用操作方式相结合的方法。

redux-form不提供使用操作处理提交函数的简化方法吗？

如果某些事情不清楚，或者您需要一些代码来更清楚地了解我想要实现的目标，请随时提出任何问题。谢谢！

Answer 1

Redux-form允许您传入提交处理程序属性，您可以在其他地方使用该属性。

一种可能的方法。

您的父组件：

class FormHandler extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(data) {
    return this.props.asyncAction(data).then(() => {
      throw new SubmissionError({ user: 'Username already taken.', _error: 'Form submission failed' });
    }
  }
  render() {
    return <MyForm onSubmit={this.handleSubmit} />
  }
}

export default connect(mapStateToProps, { asyncAction })(FormHandler);

您可以像平常没有使用redux-form一样连接父组件，而handleSubmit可以是连接到商店的操作。

您可以在Redux form official documentation 上找到有关提交验证的详情。

您的 redux-form MyForm ：

class MyForm extends Component {
  render() {
    const { error, handleSubmit, onSubmit, submitting } = this.props;

    return (
      <form onSubmit={handleSubmit(onSubmit)}>
          ... fields ...
          <button type="submit" disabled={submitting}>Create</button>
      </form>
    );
  }
}

MyForm.PropTypes = {
  onSubmit: PropTypes.func.isRequired
};

export default reduxForm({
  form: 'myForm',
})(MyForm);

使用redux-forms“onSubmit”中的dispatch进行单独的API调用

1 个答案: