Menangani Kesalahan AJAX dengan Formulir Redux

Saya baru mengenal React/Redux jadi saya membuat aplikasi blog sederhana dengan Redux Form untuk membantu saya belajar. Saat ini saya tidak yakin bagaimana cara menangani kesalahan ajax saat mengirimkan data dari formulir ke api dalam tindakan saya. Masalah utamanya adalah saya menggunakan properti konfigurasi onSubmitSuccess dari Redux Form dan sepertinya selalu dipanggil, bahkan ketika terjadi kesalahan. Saya benar-benar tidak mengerti apa yang memicu onSubmitSuccess atau onSubmitFail. Fungsi onSubmitFail saya tidak pernah dijalankan, tetapi fungsi onSubmitSuccess saya selalu dijalankan, terlepas dari apakah terjadi kesalahan atau tidak.

Saya membaca tentang SubmissionError di dokumen redux-form, tetapi dikatakan bahwa tujuannya adalah "untuk membedakan penolakan janji karena kesalahan validasi dari penolakan janji karena AJAX I/O". Jadi, sepertinya itu kebalikan dari apa yang saya butuhkan.

Saya menggunakan redux-promise sebagai middleware dengan Redux jika itu ada bedanya.

Ini kode saya. Saya sengaja membuat kesalahan pada api server saya untuk menghasilkan kesalahan dalam tindakan createPost saya:

Penampung dengan formulir redux saya

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)

Tindakan yang diminta oleh 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?
  }
}

reactjs redux redux-form
person Adam    schedule 13.10.2017    source sumber

Jawaban (2)


arrow_upward
3
arrow_downward

Dalam kasus Anda, redux-form tidak mengetahui apakah pengiriman formulir berhasil atau tidak, karena Anda tidak mengembalikan fungsi Janji dari onSubmit.

Dalam kasus Anda, hal ini dapat dicapai, tanpa menggunakan redux-promise atau pustaka penanganan asinkron lainnya:

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)
person 1ven    schedule 14.10.2017
comment
Ini berhasil dengan baik. Untuk beberapa alasan saya berasumsi bahwa hal-hal seperti panggilan ajax hanya boleh ditangani di dalam tindakan Anda. Saya belum mempertimbangkan untuk melakukannya di dalam fungsi onSubmit saya. - person Adam; 15.10.2017

arrow_upward
1
arrow_downward

Untuk menangani tindakan asinkron, Anda harus menggunakan redux-thunk, redux-saga atau middleware lain yang memungkinkan untuk menjalankan kode asinkron.

person floriangosse    schedule 13.10.2017
comment
Saya sadar bahwa menggunakan middleware adalah pendekatan terbaik untuk menangani tindakan asinkron. Saya tidak tahu apakah Anda memperhatikan bahwa saya mengatakan bahwa saya menggunakan middleware redux-promise dalam pertanyaan saya? Saya bisa menggunakan redux-thunk sebagai gantinya, tapi masalah saya adalah saya tidak tahu apa yang harus saya lakukan untuk menangani kesalahan saat menggunakan middleware ini. Saya tidak tahu apa yang akan membatalkan fungsi onSubmitSuccess yang telah saya konfigurasikan dengan redux-form, atau apa yang akan memicu onSubmitFail sebagai gantinya. Pertanyaannya adalah tentang bagaimana menangani kesalahan dengan redux-form secara khusus. - person Adam; 13.10.2017