Question

我是React / Redux的新手，所以我正在使用Redux Form构建一个简单的博客应用程序来帮助我学习。现在我不清楚在我的动作中将表单中的数据提交到api时如何处理ajax错误。主要问题是我正在使用Redux Form的onSubmitSuccess配置属性，它似乎总是被调用，即使发生错误也是如此。我真的不清楚onSubmitSuccess或onSubmitFail上的触发器。我的onSubmitFail函数永远不会执行，但无论是否发生错误，我的onSubmitSuccess函数总是如此。

我在redux-form文档中读到了SubmissionError，但它说它的目的是“以区分承诺拒绝，因为AJAX I / O因承诺拒绝而导致验证错误”< / em>的。所以，听起来这与我需要的相反。

我正在使用redux-promise作为Redux的中间件，如果这有任何区别的话。

这是我的代码。我故意在我的服务器api中抛出一个错误，在我的createPost操作中生成错误：

使用我的redux格式的容器

PostsNew = reduxForm({ validate, form: 'PostsNewForm', onSubmit(values, dispatch, props) { // calling my createPost action when the form is submitted. // should I catch the error here? // if so, what would I do to stop onSubmitSuccess from executing? props.createPost(values) } onSubmitSuccess(result, dispatch, props) { // this is always called, even when an exeption occurs in createPost() }, onSubmitFail(errors, dispatch) { // this function is never called } })(PostsNew)

onSubmit调用的操作

export async function createPost(values) { try { const response = await axios.post('/api/posts', values) return { type: CREATE_POST, payload: response } } catch (err) { // what would I do here that would trigger onSubmitFail(), // or stop onSubmitSuccess() from executing? } }

Answer 1

在您的情况下，redux-form并不知道表单提交是否成功，因为您没有从onSubmit函数返回Promise。

在您的情况下，可以在不使用redux-promise或任何其他异步处理库的情况下实现此目的：

PostsNew = reduxForm({
  validate,
  form: 'PostsNewForm',
  onSubmit(values, dispatch, props) {
    // as axios returns a Promise, we are good here
    return axios.post('/api/posts', values);
  }
  onSubmitSuccess(result, dispatch, props) {
    // if request was succeeded(axios will resolve Promise), that function will be called
    // and we can dispatch success action
    dispatch({
      type: CREATE_POST,
      payload: response
    })
  },
  onSubmitFail(errors, dispatch) {
    // if request was failed(axios will reject Promise), we will reach that function
    // and could dispatch failure action
    dispatch({
      type: CREATE_POST_FAILURE,
      payload: errors
    })
  }
})(PostsNew)

Answer 2

为了处理异步操作，您应该使用redux-thunk，redux-saga或其他可以运行异步代码的中间件。

使用Redux表单处理AJAX错误

2 个答案: