Comment implémenter des actions Redux chronométrées ?

Comment envoyer une action Redux avec un délai d'attente ?

Dans Redux, vous pouvez utiliser setTimeout et envoyer une autre action pour renvoyer l'état de notification à son état initial après un certain temps. De cette façon, les notifications disparaissent automatiquement après un intervalle de temps spécifié.

Utilisation de JavaScript en ligne

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

Extraction d'un créateur d'action asynchrone

Si vous rencontrez une duplication de code ou des conditions de concurrence en utilisant l'approche en ligne, envisagez d'extraire une action asynchrone créateur.

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

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

Utilisation du middleware Thunk

Pour les applications complexes, vous souhaiterez peut-être utiliser le middleware Redux Thunk. Il permet à Redux de reconnaître les fonctions en tant que créateurs d'action et donne accès à dispatch et getState au sein de ces fonctions.

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

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

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

Lecture de l'état dans Thunks

Au sein des créateurs d'action thunk, vous pouvez utiliser getState pour lire l'état actuel du magasin. Ceci est utile pour distribuer des actions de manière conditionnelle en fonction de l'état actuel.

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

N'oubliez pas d'utiliser ces techniques uniquement lorsque cela est nécessaire, car un simple JavaScript en ligne peut suffire dans de nombreux scénarios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!