Wie werden Redux-Aktionen mit Zeitüberschreitungen versendet?

Versenden von Redux-Aktionen mit Timeouts

Problem

Angenommen, Sie haben eine Redux-Anwendung, die Benachrichtigungen verwaltet und Meldungen wie Fehler oder informative Warnungen anzeigt. Sie möchten diese Benachrichtigungen nach einer bestimmten Zeit, beispielsweise 5 Sekunden, automatisch schließen.

Lösung: Inline-Async-Code

Der einfachste Ansatz besteht darin, setTimeout direkt zu verwenden:

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

Lösung: Extrahieren des Async Action Creator

Um Duplikate und Race Conditions zu vermeiden, sollten Sie das Extrahieren einer Aktion in Betracht ziehen Ersteller:

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

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

Dann verwenden Sie es in Komponenten:

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

Lösung: Verwendung von Thunk Middleware

Thunk Middleware bietet mehr Flexibilität. Es ermöglicht Ihnen, Funktionen auszulösen, die Aktionen zurückgeben:

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

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

Sie können dann den Thunk-Aktionsersteller direkt auslösen:

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

Status in Thunks lesen

Thunks auch ermöglicht es Ihnen, den aktuellen Status des zu lesen Store:

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

    // ...
  };
}

Empfehlungen

Verwenden Sie den einfachsten Ansatz, der Ihren Anforderungen entspricht. Thunks bieten erweiterte Asynchronfunktionen, sind jedoch möglicherweise nicht in allen Fällen erforderlich.

Das obige ist der detaillierte Inhalt vonWie werden Redux-Aktionen mit Zeitüberschreitungen versendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!