Wie kann ich eine Redux-Aktion nach einer Zeitüberschreitung auslösen?

Auslösen einer Redux-Aktion mit einer Zeitüberschreitung

Bei der Arbeit mit Redux kann die Behandlung asynchroner Ereignisse wie das Auslösen einer Aktion nach einer bestimmten Verzögerung nützlich sein, um Benachrichtigungen und Timer anzuzeigen , und andere zeitkritische Funktionen.

Verwendung von setTimeout- und Callback-Funktionen

Die Der einfachste Ansatz besteht darin, die integrierten JavaScript-Funktionen setTimeout und eine Callback-Funktion zu verwenden.

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

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

Verwendung der Thunk-Middleware (empfohlen)

Mit der Redux Thunk-Middleware können Sie Funktionen auslösen, die andere Aktionen zurückgeben Der Reihe nach. Dies ermöglicht asynchrone Aktionen und eine bessere Kontrolle über Nebenwirkungen.

Installieren Sie die Middleware mit npm:

npm install --save redux-thunk

In Ihrer Redux-Store-Konfiguration:

import thunk from 'redux-thunk';

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

Definieren Sie einen Thunk Aktionsersteller, der die Dispatch-Funktion als Argument akzeptiert:

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

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

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

Dispatch the thunk:

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

Status in Thunks lesen

Thunk-Aktionsersteller können mithilfe der von Redux Thunk bereitgestellten getState-Funktion auf den aktuellen Status des Stores zugreifen. Dies ermöglicht die bedingte Ausführung von Aktionen basierend auf dem Status:

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

Fazit

Das Auslösen einer Aktion mit einem Timeout in Redux kann mithilfe von setTimeout- und Callback-Funktionen oder durch Nutzung des Redux Thunk erreicht werden Middleware. Thunk bietet mehr Kontrolle über asynchrone Aktionen und ermöglicht eine bedingte Ausführung basierend auf dem Status. Erwägen Sie für komplexe asynchrone Szenarien die Verwendung fortschrittlicherer Lösungen wie Redux Saga oder Redux Loop.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Redux-Aktion nach einer Zeitüberschreitung auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!