Question

我有一个redux表单，可以在表单提交时调用rest API。如果API调用失败，我想引发SubmissionError，以便可以在表单上显示错误。由于提交错误详细信息映射到表单上的属性，我希望此处理成为表单组件的一部分。

表单成功提交到API并获得成功响应后，我希望表单组件调用提供给表单组件的方法（methodA）。

目前，我能看到这样做的唯一方法是：

在表单组件的props中传递methodA。
在表单组件中调用reduxForm（）为配置对象中的onSubmitSuccess提供方法（methodB）
在方法B中从提供的道具中拉出方法A，然后调用它

这是做我想做的最好的方式还是有更简单的方法？

Answer 1

在动作创建者中（假设您正在使用反应 - thunk）

const submit = (url, data) => dispatch => {
  dispatch({ type: 'submit-start' });

  return new Promise((res, rej) => 
    fetch(/*do some stuff*/)
      .then(res => {
        if (res.status !== 200) {
          dispatch({ type: 'submit-err' })
          //the object which is rejected here
          //configures the errors displayed in the form
          //in best case your server delivers an appropriate
          //response
          rej({ _error: 'Validation Failed', age: 'too young' });

        } else {
          dispatch({ type: 'submit-success' });
          res(res.json())
        }

      })
  );
}

export { submit };

并在组件中：

submit (data) {
  return this.props.submit(<url>, data)
}

render () {
  const { handleSubmit } = this.props;
  return <form onSubmit={handleSubmit(submit)}>…</form>
}

如果拒绝来自操作创建者的返回Promise，则会显示错误消息。

Redux-Thunk返回使用dispatch作为参数调用的函数的返回值，在本例中为promise。

对于redux表单提交验证，submit函数必须返回一个可以解析或拒绝的promise。

docs

使用Redux表单如何在成功提交异步表单后提供执行回调？

1 个答案: