Comment envoyer une action Redux après un délai d'attente ?

Dépôt d'une action Redux avec un délai d'attente

Lorsque vous travaillez avec Redux, la gestion d'événements asynchrones tels que l'envoi d'une action après un délai spécifié peut être utile pour afficher les notifications, les minuteries , et d'autres fonctionnalités sensibles au temps.

Utilisation des fonctions setTimeout et Callback

Le L'approche la plus simple consiste à utiliser les fonctions JavaScript intégrées setTimeout et une fonction de rappel.

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

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

Utilisation du middleware Thunk (recommandé)

Le middleware Redux Thunk vous permet de distribuer des fonctions qui renvoient d'autres actions. séquentiellement. Cela permet des actions asynchrones et un meilleur contrôle des effets secondaires.

Installez le middleware à l'aide de npm :

npm install --save redux-thunk

Dans la configuration de votre boutique Redux :

import thunk from 'redux-thunk';

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

Définissez un thunk créateur d'action qui accepte la fonction dispatch comme argument :

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

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

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

Dispatcher le thunk :

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

Lecture de l'état dans Thunks

Les créateurs d'actions Thunk peuvent accéder à l'état actuel du magasin à l'aide de la fonction getState fournie par Redux Thunk. Cela permet l'exécution conditionnelle d'actions basées sur l'état :

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);
  }
};

Conclusion

La distribution d'une action avec un délai d'attente dans Redux peut être réalisée à l'aide des fonctions setTimeout et de rappel ou en tirant parti de Redux Thunk middleware. Thunk offre plus de contrôle sur les actions asynchrones et permet une exécution conditionnelle basée sur l'état. Pour les scénarios asynchrones complexes, envisagez d'utiliser des solutions plus avancées comme Redux Saga ou Redux Loop.

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!