Wie implementiert man zeitgesteuerte Redux-Aktionen?

Wie schicke ich eine Redux-Aktion mit einem Timeout?

In Redux können Sie setTimeout verwenden und eine andere Aktion versenden, um den Benachrichtigungsstatus zurückzugeben nach einer gewissen Zeit wieder in den Ausgangszustand zurück. Auf diese Weise verschwinden Benachrichtigungen automatisch nach einem bestimmten Zeitintervall.

Verwendung von Inline-JavaScript

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

Extrahieren eines Async Action Creator

Wenn Sie beim Inline-Ansatz auf Codeduplizierung oder Race-Bedingungen stoßen, sollten Sie das Extrahieren einer asynchronen Aktion in Betracht ziehen Ersteller.

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

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

Thunk-Middleware verwenden

Für komplexe Apps möchten Sie möglicherweise die Redux-Thunk-Middleware verwenden. Es ermöglicht Redux, Funktionen als Aktionsersteller zu erkennen und bietet Zugriff auf „dispatch“ und „getState“ innerhalb dieser Funktionen.

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

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

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

Status in Thunks lesen

Innerhalb von Thunk-Aktionserstellern Sie können getState verwenden, um den aktuellen Status des Geschäfts auszulesen. Dies ist hilfreich, um Aktionen basierend auf dem aktuellen Status bedingt auszulösen.

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

Denken Sie daran, diese Techniken nur bei Bedarf zu verwenden, da einfaches Inline-JavaScript für viele Szenarien ausreichen kann.

Das obige ist der detaillierte Inhalt vonWie implementiert man zeitgesteuerte Redux-Aktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!