使用来自 redux-forms "onSubmit" 的分派来分离 API 调用

Question

我按照文档的建议集成了 redux-form，一切正常。作为下一步，我想向我的应用程序添加异步 API 调用，并将它们与 redux-form.

创建的表单结合起来

像往常一样，我想将 ui 组件与应用程序逻辑分开。 redux 的做法是在组件中分派操作并在 reducer 中执行必要的逻辑。当您需要在 actions/actionCreators 内部进行异步操作时，可以使用 redux-thunk 或其他库，例如 redux-saga.

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

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" 的分派来分离 API 调用

Separate API calls using dispatch from redux-forms "onSubmit"

reactjs

redux

redux-form

redux-thunk