Bagaimana untuk Menghantar Tindakan Redux dengan Tamat Masa?

Menghantar Tindakan Redux dengan Tamat Masa

Masalah

Andaikan anda mempunyai aplikasi Redux yang mengurus pemberitahuan, memaparkan mesej seperti ralat atau makluman bermaklumat. Anda ingin mengetepikan pemberitahuan ini secara automatik selepas masa tertentu, katakan 5 saat.

Penyelesaian: Kod Async Sebaris

Pendekatan paling mudah ialah menggunakan setTimeout secara terus:

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

Penyelesaian: Mengekstrak Async Action Creator

Untuk mengelakkan pertindihan dan keadaan perlumbaan, pertimbangkan untuk mengekstrak tindakan pencipta:

function showNotificationWithTimeout(dispatch, text) {
  const id = nextNotificationId++;
  dispatch(showNotification(id, text));

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

Kemudian gunakannya dalam komponen:

showNotificationWithTimeout(this.props.dispatch, 'You just logged in.');

Penyelesaian: Menggunakan Thunk Middleware

Thunk middleware memberikan lebih fleksibiliti. Ia membolehkan anda menghantar fungsi yang mengembalikan tindakan:

export function showNotificationWithTimeout(text) {
  return function (dispatch) {
    const id = nextNotificationId++;
    dispatch(showNotification(id, text));

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

Anda kemudiannya boleh menghantar pencipta tindakan thunk secara terus:

this.props.dispatch(showNotificationWithTimeout('You just logged in.'));

Keadaan Membaca dalam Thunks

Thunks juga membolehkan anda membaca keadaan semasa kedai:

export function showNotificationWithTimeout(text) {
  return function (dispatch, getState) {
    if (!getState().areNotificationsEnabled) {
      return;
    }

    // ...
  };
}

Cadangan

Gunakan pendekatan paling mudah yang memenuhi keperluan anda. Thunks menyediakan keupayaan async lanjutan tetapi mungkin tidak diperlukan dalam semua kes.

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!