Bagaimana untuk Menghantar Tindakan Redux Selepas Tamat Masa?

Menghantar Tindakan Redux dengan Tamat Masa

Apabila bekerja dengan Redux, mengendalikan peristiwa tak segerak seperti menghantar tindakan selepas kelewatan yang ditentukan boleh berguna untuk memaparkan pemberitahuan, pemasa , dan fungsi sensitif masa yang lain.

Menggunakan setTimeout dan Callback Fungsi

Pendekatan paling mudah ialah menggunakan fungsi JavaScript terbina dalam setTimeout dan fungsi panggil balik.

store.dispatch({ type: 'SHOW_NOTIFICATION', message: 'Success!' });

setTimeout(() => {
 store.dispatch({ type: 'HIDE_NOTIFICATION' });
}, 5000); // Set a timeout of 5 seconds

Menggunakan Thunk Middleware (Disyorkan)

Redux Thunk middleware membenarkan anda untuk menghantar fungsi yang mengembalikan tindakan lain secara berurutan. Ini membolehkan tindakan tak segerak dan kawalan yang lebih baik ke atas kesan sampingan.

Pasang middleware menggunakan npm:

npm install --save redux-thunk

Dalam konfigurasi kedai Redux anda:

import thunk from 'redux-thunk';

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

Tentukan thunk pencipta tindakan yang menerima fungsi penghantaran sebagai hujah:

export const showNotificationWithTimeout = (message) => (dispatch) => {
  const id = uniqueID();

  dispatch({ type: 'SHOW_NOTIFICATION', id, message });

  setTimeout(() => {
    dispatch({ type: 'HIDE_NOTIFICATION', id });
  }, 5000);
};

Hantar thunk:

store.dispatch(showNotificationWithTimeout('Success!'));

Keadaan Membaca dalam Thunks

Pencipta tindakan Think boleh mengakses keadaan semasa kedai menggunakan fungsi getState yang disediakan oleh Redux Thunk. Ini membolehkan pelaksanaan tindakan bersyarat berdasarkan keadaan:

export const showNotificationWithTimeout = (message) => (dispatch, getState) => {
  const enabled = getState().settings.notificationsEnabled;

  if (enabled) {
    const id = uniqueID();
    dispatch({ type: 'SHOW_NOTIFICATION', id, message });

    setTimeout(() => {
      dispatch({ type: 'HIDE_NOTIFICATION', id });
    }, 5000);
  }
};

Kesimpulan

Menghantar tindakan dengan tamat masa dalam Redux boleh dicapai menggunakan setTimeout dan fungsi panggil balik atau dengan memanfaatkan Redux Thunk perisian tengah. Thunk menyediakan lebih kawalan ke atas tindakan tak segerak dan membenarkan pelaksanaan bersyarat berdasarkan keadaan. Untuk senario tak segerak yang kompleks, pertimbangkan untuk menggunakan penyelesaian yang lebih maju seperti Redux Saga atau Redux Loop.

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