Mengapa Menggunakan Middleware untuk Tindakan Asynchronous dalam Redux?

Mengapakah kita memerlukan perisian tengah untuk aliran tak segerak dalam Redux?

Pada mulanya mungkin kelihatan Redux tidak menyokong aliran data tak segerak kerana ia menentukan bahawa "Stor Redux hanya menyokong aliran data segerak." Walau bagaimanapun, ini tidak berlaku.

Dalam contoh yang diberikan, komponen kontena pastinya boleh menggunakan API tak segerak dan seterusnya menghantar tindakan yang perlu. Malah, pendekatan ini berfungsi dengan betul, seperti yang ditunjukkan oleh pengemaskinian medan apabila butang diklik.

Apa masalahnya dengan strategi ini?

The kebimbangan utama timbul dalam konteks aplikasi yang lebih besar di mana banyak komponen boleh melakukan tindakan yang sama atau di mana ia mungkin wajar untuk menggabungkan ciri seperti nyahlantun. Selain itu, mungkin berfaedah untuk mengekalkan pencipta tindakan berhampiran keadaan setempat untuk tugas seperti ID peningkatan automatik.

Dari perspektif penyelenggaraan, ia memudahkan urusan untuk memisahkan pencipta tindakan kepada fungsi yang berbeza, memudahkan pembangunan dan penyelenggaraan pangkalan kod.

Manakala perisian tengah seperti Redux Thunk atau Redux Promise menyediakan pemudahan kod melalui gula sintaksis, ia tidak begitu diperlukan untuk tujuan mengendalikan tindakan tak segerak.

Tanpa Middleware:

Jika tiada middleware, pencipta tindakan boleh melakukan operasi async secara langsung , seperti yang digambarkan di bawah:

function loadData(dispatch, userId) {
  fetch(`http://data.com/${userId}`)
    .then(res => res.json())
    .then(
      data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
      err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
    );
}

// in component
componentWillMount() {
  loadData(this.props.dispatch, this.props.userId); // pass dispatch as argument for async action creator
}

Dengan Thunk Middleware:

Redux Thunk menawarkan sintaks yang lebih ringkas untuk menghantar tindakan tak segerak:

function loadData(userId) {
  return dispatch =>
    fetch(`http://data.com/${userId}`)
      .then(res => res.json())
      .then(
        data => dispatch({ type: 'LOAD_DATA_SUCCESS', data }),
        err => dispatch({ type: 'LOAD_DATA_FAILURE', err })
      );
}

// in component
componentWillMount() {
  this.props.dispatch(loadData(this.props.userId)); // dispatch as usual
}

Faedah Middleware:

Yang utama kelebihan menggunakan perisian tengah seperti Redux Thunk terletak pada penyahgandingan komponen daripada tindakan butiran pelaksanaan pencipta. Komponen tetap tidak menyedari sama ada pencipta tindakan adalah segerak atau tak segerak dan sama ada ia berinteraksi dengan keadaan Redux atau pencipta tindakan lain.

Alternatif kepada Middleware:

Redux Thunk ialah bukan satu-satunya pendekatan untuk mengendalikan permintaan tak segerak dalam aplikasi Redux. Alternatif lain yang menarik ialah Redux Saga, yang membolehkan takrifan "sagas" jangka panjang yang beroperasi pada tindakan masuk, mengubah atau melaksanakan permintaan sebelum menghasilkan tindakan selanjutnya.

Atas ialah kandungan terperinci Mengapa Menggunakan Middleware untuk Tindakan Asynchronous dalam Redux?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!