Comment distribuer des actions Redux avec des délais d'attente ?

Répartition des actions Redux avec délais d'attente

Problème

Supposons que vous disposiez d'une application Redux qui gère les notifications, affichant des messages tels que des erreurs ou des alertes informatives. Vous souhaitez ignorer automatiquement ces notifications après un certain temps, disons 5 secondes.

Solution : code asynchrone en ligne

L'approche la plus simple consiste à utiliser directement setTimeout :

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

Solution : Extraire Async Action Creator

Pour éviter les duplications et les conditions de concurrence critique, envisagez d'extraire une action créateur :

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

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

Ensuite, utilisez-le dans les composants :

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

Solution : utiliser le middleware Thunk

Le middleware Thunk offre plus de flexibilité. Il vous permet d'envoyer des fonctions qui renvoient des actions :

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

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

Vous pouvez ensuite envoyer directement le créateur d'action thunk :

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

Lecture de l'état dans Thunks

Thunks également vous permettent de lire l'état actuel du magasin :

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

    // ...
  };
}

Recommandations

Utilisez l'approche la plus simple qui répond à vos besoins. Thunks offre des fonctionnalités asynchrones avancées mais peut ne pas être nécessaire dans tous les cas.

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!