Wie kann ich eine Redux-Aktion mit einem Timeout auslösen?

Wie sende ich eine Redux-Aktion mit Timeout?

Problem:

Ich muss den Benachrichtigungsstatus meiner App mithilfe eines Timeout-Mechanismus aktualisieren. Bei Benachrichtigungen handelt es sich in der Regel um Fehler oder Meldungen. Ich muss nach 5 Sekunden eine weitere Aktion senden, um den Benachrichtigungsstatus in den Ausgangszustand zurückzusetzen, sodass die Benachrichtigung nicht angezeigt wird. Der Hauptgrund besteht darin, eine Funktion bereitzustellen, mit der Benachrichtigungen automatisch nach 5 Sekunden verschwinden.

Ich habe versucht, setTimeout zu verwenden und eine andere Aktion zurückzugeben, aber ohne Erfolg, und ich habe online keine entsprechenden Methoden gefunden. Ich bin bereit, alle Vorschläge auszuprobieren.

Antwort:

Sie müssen sich nicht darauf beschränken, alle Operationen in eine Funktionsbibliothek zu schreiben. Wenn Sie Timeouts in JavaScript verwenden möchten, verwenden Sie einfach setTimeout. Das gleiche Prinzip gilt für Redux-Aktionen.

Redux bietet zwar Alternativen für die Behandlung asynchroner Ereignisse, Sie sollten diese jedoch nur verwenden, wenn Sie feststellen, dass zu viel Code dupliziert wird. Sofern Sie nicht auf ein solches Problem stoßen, nutzen Sie einfach die Möglichkeiten der Sprache und verfolgen Sie die einfachste Lösung.

Asynchronen Code inline schreiben

Dies ist der einfachste Weg. Hier werden keine Redux-spezifischen Methoden verwendet.

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

Derselbe Vorgang wird in der verbundenen Komponente ausgeführt:

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

Der einzige Unterschied besteht darin, dass der Speicher selbst normalerweise nicht in der verbundenen Komponente zugänglich ist, sondern durch Injektion erhalten wird Requisiten an „dispatch()“ oder „Spezifischer Aktionsersteller“. Aber für uns macht es keinen Unterschied.

Wenn Sie beim Senden derselben Aktion in verschiedenen Komponenten keine Tippfehler machen möchten, können Sie den Aktionsersteller extrahieren, anstatt das Aktionsobjekt inline zu senden:

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

Oder, wenn Sie wurden zuvor über connect() gebunden:

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

Bisher haben wir keine Middleware oder andere fortgeschrittene Konzepte verwendet.

Extrahieren Sie den Ersteller der asynchronen Aktion

Die obige Methode funktioniert in einfachen Fällen gut, es können jedoch Probleme damit auftreten:

• Es zwingt Sie, diese Logik überall dort zu duplizieren, wo Sie die Benachrichtigung anzeigen möchten.
• Wenn es schnell genug ist, um zwei Benachrichtigungen anzuzeigen, haben diese Benachrichtigungen keine IDs, sodass eine Race Condition auftritt. Wenn die erste Zeitüberschreitung abläuft, wird fälschlicherweise eine HIDE_NOTIFICATION gesendet, wodurch die zweite Benachrichtigung vorzeitig ausgeblendet wird.

Um diese Probleme zu lösen, müssen Sie eine Funktion extrahieren, die Timeout-Logik zentralisieren und diese beiden Vorgänge ausführen. Wie unten gezeigt:

// actions.js
function showNotification(id, text) {
  return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
  return { type: 'HIDE_NOTIFICATION', id }
}

let nextNotificationId = 0
export function showNotificationWithTimeout(dispatch, text) {
  // 为通知分配 ID，这样 reducer 就可以忽略不当前可见通知的 HIDE_NOTIFICATION。
  // 或者，我们可以存储超时 ID 并调用 clearTimeout()，但是我们仍然需要在一个地方执行此操作。
  const id = nextNotificationId++
  dispatch(showNotification(id, text))

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

Jetzt kann die Komponente Benachrichtigungen mithilfe von showNotificationWithTimeout anzeigen, ohne diese Logik wiederholen zu müssen oder Race-Bedingungen mit unterschiedlichen Benachrichtigungen haben zu müssen:

// component.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')

// otherComponent.js
showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')    

showNotificationWithTimeout() Warum akzeptiert Versand als Der erste Parameter? Weil es Vorgänge an den Store senden muss. Komponenten haben normalerweise Zugriff auf den Versand, aber da wir möchten, dass die externe Funktion den Versandvorgang steuert, müssen wir ihr die Kontrolle geben.

Wenn Sie einen einzelnen Shop aus einem Modul exportiert haben, können Sie ihn importieren und den Sendevorgang direkt darin ausführen:

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

Sieht einfacher aus, aber wir empfehlen diese Methode nicht . Der Hauptgrund, warum es uns nicht gefällt, ist, dass es den Store dazu zwingt, ein Singleton zu sein. Dies macht die Implementierung von serverseitigem Rendering sehr schwierig. Auf der Serverseite möchten Sie, dass jede Anfrage über einen eigenen Speicher verfügt, sodass verschiedene Benutzer unterschiedliche vorinstallierte Daten erhalten.

Eine einzige Filiale erschwert auch das Testen. Sie können einen Store beim Testen von Aktionserstellern nicht mehr verspotten, da diese auf einen bestimmten realen Store verweisen, der aus einem bestimmten Modul exportiert wurde. Sie können den Status nicht einmal extern zurücksetzen.

Obwohl Sie technisch gesehen einen einzelnen Shop aus einem Modul exportieren können, empfehlen wir dies nicht. Tun Sie dies nicht, es sei denn, Sie sind sicher, dass Ihre App niemals serverseitiges Rendering hinzufügen wird.

Zurück zur vorherigen Version:

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

Dies löst das Problem der doppelten Logik und vermeidet Race Conditions.

Thunk-Middleware

Für einfache Anwendungen ist die obige Methode ausreichend. Wenn Sie damit zufrieden sind, machen Sie sich über die Middleware keine Sorgen.

Bei größeren Anwendungen kann es jedoch zu Unannehmlichkeiten kommen.

Zum Beispiel erscheint es unglücklich, den Versand weiterzugeben. Dies macht es schwieriger, Container- und Präsentationskomponenten zu entkoppeln, da jede Komponente, die Redux-Operationen wie oben beschrieben asynchron sendet, den Versand als Requisite akzeptieren muss, damit sie weitergegeben werden kann. Sie können connect() nicht mehr zum Binden eines Aktionserstellers verwenden, da showNotificationWithTimeout() nicht wirklich ein Aktionsersteller ist. Es werden keine Redux-Operationen zurückgegeben.

Außerdem kann es umständlich sein, sich zu merken, welche Funktionen synchrone Aktionsersteller sind (z. B. showNotification()) und welche asynchrone Hilfsfunktionen sind (z. B. showNotificationWithTimeout()). Sie müssen sie auf unterschiedliche Weise verwenden und darauf achten, sie nicht miteinander zu verwechseln.

Hier finden wir einen Weg, die Bereitstellung dieses Musters für Hilfsfunktionen zu „legitimieren“ und Redux dabei zu helfen, solche asynchronen Aktionsersteller als Sonderfall normaler Aktionsersteller zu „behandeln“ und nicht ausschließlich als Motivation für verschiedene Funktionen.

Wenn Sie immer noch darauf bestehen und glauben, dass dieses Problem in Ihrer eigenen Anwendung besteht, können Sie gerne die Redux Thunk-Middleware verwenden.

Einfach ausgedrückt bringt Redux Thunk Redux bei, spezielle Arten von Operationen zu erkennen, die tatsächlich Funktionen sind:

// actions.js
export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
}

// component.js
import { showNotification, hideNotification } from '../actions'

this.props.dispatch(showNotification('You just logged in.'))
setTimeout(() => {
  this.props.dispatch(hideNotification())
}, 5000)

Wenn diese Middleware aktiviert ist, wenn Sie eine Funktion senden , übergibt die Redux Thunk-Middleware den Dispatch als Parameter an sie. Es „frisst“ auch solche Aktionen, also machen Sie sich keine Sorgen, dass Ihre Reduzierer seltsame Funktionsargumente erhalten. Ihre Reduzierer empfangen nur reguläre Objektoperationen – solche, die direkt oder, wie wir gerade beschrieben haben, von Funktionen gesendet werden.

Sieht aus, als wäre es nutzlos, nicht wahr? Nicht in diesem speziellen Fall. Aber es erlaubt uns, showNotificationWithTimeout() als regulären Redux-Aktionsersteller zu deklarieren:

this.props.showNotification('You just logged in.')
setTimeout(() => {
  this.props.hideNotification()
}, 5000)

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