Bagaimana untuk Melaksanakan Tindakan Redux Bermasa?

Bagaimana untuk Menghantar Tindakan Redux dengan Tamat Masa?

Dalam Redux, anda boleh menggunakan setTimeout dan menghantar tindakan lain untuk mengembalikan keadaan pemberitahuan kepada keadaan asalnya selepas tempoh masa tertentu. Dengan cara ini, pemberitahuan hilang secara automatik selepas selang masa yang ditentukan.

Menggunakan JavaScript Sebaris

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

Mengekstrak Pencipta Tindakan Async

Jika anda menghadapi pertindihan kod atau keadaan perlumbaan menggunakan pendekatan sebaris, pertimbangkan untuk mengekstrak tindakan async pencipta.

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

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

Menggunakan Thunk Middleware

Untuk apl yang kompleks, anda mungkin mahu menggunakan perisian tengah Redux Thunk. Ia membolehkan Redux mengenali fungsi sebagai pencipta tindakan dan menyediakan akses kepada penghantaran dan getState dalam fungsi tersebut.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

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

store.dispatch(showNotificationWithTimeout('You logged in.'));

Keadaan Membaca dalam Thunks

Dalam pencipta tindakan thunk, anda boleh menggunakan getState untuk membaca keadaan semasa kedai. Ini berguna untuk tindakan menghantar bersyarat berdasarkan keadaan semasa.

showNotificationWithTimeout(dispatch, getState) {
  if (!getState().areNotificationsEnabled) {
    return;
  }
  // ... continue with action-dispatching logic
}

Ingat untuk menggunakan teknik ini hanya apabila perlu, kerana JavaScript sebaris mudah mungkin mencukupi untuk banyak senario.

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