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

我有一个redux表单，它将在表单提交时调用一个rest API。如果API调用失败，我想引发一个SubmissionError，以便可以在窗体上显示错误。由于提交错误的详细信息映射到表单上的属性，我希望这个处理是表单组件的一部分。使用Redux表单如何在成功提交异步表单提交后提供回调以执行？

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

此刻，我可以看到这样做的唯一方法是：

通行证在了methodA的形式组成的道具。
在窗体部件的调用reduxForm（）在配置对象提供一个方法，以onSubmitSuccess（的methodB）
在的methodB从所提供的道具拉了methodA然后调用它

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

来源

2017-04-24 Dan

在操作创建者（假设你使用反应-形实转换）

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> 
}

，错误消息被展示。

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

对于重写表单提交验证，提交函数必须返回一个可以解决或拒绝的承诺。

docs

来源

2017-04-24 14:57:05 philipp

谢谢，这几乎是我已经做的。我想要做的是将任意回调传递给在成功解析获取承诺后调用的组件。我不能直接链接到获取诺言，因为我想捕获其他错误，但不是SubmissionErrors，并且解决这个问题很麻烦。 – Dan

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

回答

相关问题