Bagaimana untuk Menghantar Tindakan Redux dengan Tamat Masa?

Bagaimana untuk menghantar tindakan Redux dengan tamat masa?

Masalah:

Saya perlu mengemas kini status pemberitahuan apl saya menggunakan mekanisme tamat masa. Pemberitahuan biasanya ralat atau mesej. Saya perlu menghantar tindakan lain selepas 5 saat untuk mengembalikan keadaan pemberitahuan kepada keadaan awal supaya pemberitahuan tidak ditunjukkan. Sebab utama adalah untuk menyediakan ciri di mana pemberitahuan hilang secara automatik selepas 5 saat.

Saya telah mencuba menggunakan setTimeout dan mengembalikan tindakan lain, tetapi tidak berjaya, dan saya tidak menemui sebarang kaedah berkaitan dalam talian. Saya bersedia untuk mencuba sebarang cadangan.

Jawapan:

Anda tidak perlu terhad kepada tabiat menulis semua operasi ke dalam pustaka fungsi. Jika anda ingin menggunakan tamat masa dalam JavaScript, hanya gunakan setTimeout. Prinsip yang sama berlaku untuk tindakan Redux.

Redux memang menyediakan alternatif untuk mengendalikan peristiwa tak segerak, tetapi anda hanya perlu menggunakannya jika anda mendapati terdapat terlalu banyak pertindihan kod. Melainkan anda menghadapi masalah seperti itu, hanya gunakan pilihan yang disediakan oleh bahasa dan lakukan penyelesaian yang paling mudah.

Tulis kod tak segerak dalam baris

Ini adalah cara paling mudah. Tiada kaedah khusus Redux digunakan di sini.

store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

Operasi yang sama dilakukan dalam komponen yang disambungkan:

this.props.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

Satu-satunya perbezaan ialah kedai itu sendiri biasanya tidak boleh diakses dalam komponen yang disambungkan, tetapi diperoleh dengan menyuntik props to dispatch() atau Pencipta tindakan khusus. Tetapi bagi kami, tidak ada bezanya.

Jika anda tidak mahu membuat kesilapan apabila menghantar tindakan yang sama dalam komponen yang berbeza, anda boleh mengekstrak pencipta tindakan dan bukannya menghantar objek tindakan sebaris:

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

Atau, jika anda sebelum Mereka telah diikat melalui connect():

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

Setakat ini kami tidak menggunakan sebarang perisian tengah atau konsep lanjutan lain.

Ekstrak pencipta tindakan async

Kaedah di atas berfungsi dengan baik dalam kes mudah, tetapi anda mungkin menemui beberapa isu dengannya:

• Ia memaksa anda untuk menduplikasi logik ini di mana sahaja anda mahu menunjukkan pemberitahuan.
• Jika ia cukup pantas untuk memaparkan dua pemberitahuan, pemberitahuan tersebut tidak akan mempunyai ID, jadi keadaan perlumbaan akan berlaku. Apabila tamat masa pertama tamat tempoh, ia tersalah menghantar HIDE_NOTIFICATION, menyembunyikan pemberitahuan kedua sebelum waktunya.

Untuk menyelesaikan masalah ini, anda perlu mengekstrak fungsi, memusatkan logik tamat masa dan menghantar kedua-dua operasi ini. Seperti yang ditunjukkan di bawah:

// actions.js
function showNotification(id, text) {
  return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
  return { type: 'HIDE_NOTIFICATION', id }
}

let nextNotificationId = 0
export function showNotificationWithTimeout(dispatch, text) {
  // 为通知分配 ID，这样 reducer 就可以忽略不当前可见通知的 HIDE_NOTIFICATION。
  // 或者，我们可以存储超时 ID 并调用 clearTimeout()，但是我们仍然需要在一个地方执行此操作。
  const id = nextNotificationId++
  dispatch(showNotification(id, text))

  setTimeout(() => {
    dispatch(hideNotification(id))
  }, 5000)
}

Kini komponen boleh memaparkan pemberitahuan menggunakan showNotificationWithTimeout tanpa perlu mengulangi logik ini atau mempunyai syarat perlumbaan dengan pemberitahuan yang berbeza:

// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')

// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')    

showNotificationWithTimeout() Mengapa menerima penghantaran sebagai Parameter pertama? Kerana ia perlu menghantar operasi ke kedai. Komponen biasanya mempunyai akses kepada penghantaran, tetapi kerana kami mahu fungsi luaran mengawal operasi penghantaran, kami perlu memberi kawalan kepadanya.

Jika anda telah mengeksport satu kedai daripada modul, anda boleh mengimportnya dan melakukan operasi hantar terus di dalamnya:

store.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  store.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

Nampak lebih mudah, tetapi kami tidak mengesyorkan Kaedah ini . Sebab utama kami tidak menyukainya ialah ia memaksa kedai menjadi singleton. Ini menjadikan pelaksanaan pemaparan sebelah pelayan sangat sukar. Di bahagian pelayan, anda mahu setiap permintaan mempunyai kedai sendiri supaya pengguna yang berbeza mendapat data pramuat yang berbeza.

Satu kedai juga menyukarkan ujian. Anda tidak boleh lagi mengejek kedai semasa menguji pencipta tindakan kerana mereka merujuk kepada kedai sebenar tertentu yang dieksport daripada modul tertentu. Anda tidak boleh menetapkan semula keadaannya secara luaran.

Jadi, walaupun anda secara teknikal boleh mengeksport satu kedai daripada modul, kami tidak mengesyorkan berbuat demikian. Jangan lakukan ini melainkan anda pasti apl anda tidak akan menambah pemaparan sebelah pelayan.

Kembali ke versi sebelumnya:

this.props.dispatch({ type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
  this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

Ini menyelesaikan masalah logik pendua dan mengelakkan keadaan perlumbaan.

Thunk middleware

Untuk aplikasi mudah, kaedah di atas sudah memadai. Jika anda berpuas hati dengan itu, jangan risau tentang middleware.

Walau bagaimanapun, dalam aplikasi yang lebih besar, anda mungkin menemui beberapa kesulitan.

Sebagai contoh, menghantar penghantaran kelihatan malang. Ini menjadikannya lebih sukar untuk memisahkan bekas dan komponen pembentangan, kerana mana-mana komponen yang menghantar operasi Redux secara tidak segerak seperti yang diterangkan di atas mesti menerima penghantaran sebagai prop supaya ia boleh diteruskan lagi. Anda tidak lagi boleh menggunakan connect() untuk mengikat pencipta tindakan kerana showNotificationWithTimeout() sebenarnya bukan pencipta tindakan. Ia tidak mengembalikan operasi Redux.

Selain itu, mungkin menyusahkan untuk mengingati fungsi yang merupakan pencipta tindakan segerak (cth. showNotification()) dan yang merupakan fungsi pembantu tak segerak (cth. showNotificationWithTimeout()). Anda perlu menggunakannya dengan cara yang berbeza dan berhati-hati agar tidak mengelirukan antara satu sama lain.

Di sinilah kami mencari cara untuk "menghalalkan" menyediakan corak ini untuk membantu fungsi dan membantu Redux "merawat" pencipta tindakan async sedemikian sebagai kes khas pencipta tindakan biasa dan bukannya Motivasi sepenuhnya untuk fungsi yang berbeza.

Jika anda masih berkeras dan berpendapat masalah ini wujud dalam aplikasi anda sendiri, dialu-alukan untuk menggunakan perisian tengah Redux Thunk.

Ringkasnya, Redux Thunk mengajar Redux untuk mengenali jenis operasi khas yang sebenarnya berfungsi:

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

Apabila perisian tengah ini didayakan, jika anda menghantar fungsi , Perisian tengah Redux Thunk akan menghantar penghantaran kepadanya sebagai parameter. Ia juga "memakan" tindakan sedemikian, jadi jangan risau tentang pengurang anda menerima hujah fungsi pelik. Pengurang anda hanya akan menerima operasi objek biasa—yang dihantar secara terus, atau seperti yang baru kami terangkan, dihantar melalui fungsi.

Nampak macam tak berguna, kan? Tidak dalam kes ini. Tetapi ini membolehkan kami mengisytiharkan showNotificationWithTimeout() sebagai pencipta tindakan Redux biasa:

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Tindakan Redux dengan Tamat Masa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!