Wiederverwendbare, erweiterbare und testbare Zustandslogik mit reaktiver Programmierung.

Status in UI-Komponenten

Wenn wir anfangen, einen Zustand in eine UI-Komponente einzuführen, ist es oft verlockend, so etwas zu tun:

Einfaches Gegenbeispiel in Svelte:

<script>
  let count = $state(0);
</script>

<button onclick="{()"> count++}>
  clicks: {count}
</button>

Problem

Wir verwenden hier Svelte, aber das Problem kann auch in jedem UI-Framework auftreten.

Auf Anhieb haben wir unsere Zustandslogik eng mit der Komponente verknüpft – die Inkrementierungsfunktionalität ist direkt in der Vorlage codiert.

Mit dieser Konfiguration können wir die Zählerlogik nicht wiederverwenden in:

• andere UI-Komponenten
• andere Geschäftslogik, die einen Zähler erfordert
• andere UI-Frameworks

Wir können die Zählerlogik auch nicht testen, ohne die Komponente zu rendern. Wenn mit der Komponente andere Funktionen gekoppelt sind, wäre eine Isolierung der Zählerlogik nicht möglich.

Lösung:

Trennung der Statuslogik von der UI-Komponente, damit sie unabhängig implementiert und getestet werden kann. Dadurch wird die Logik wiederverwendbar und UI-Komponenten müssen nur auf Zustandsänderungen warten und rendern. Bedenken Sie Folgendes:

<script>
  import { RxCounter } from './RxCounter';

  const [count, { increment }] = RxCounter();
</script>

<button onclick="{increment}">
  Count: {$count}
</button>

Siehe vollständiges Beispiel auf StackBlitz

Wenn Sie oben mit unserem ursprünglichen Beispiel vergleichen, ist die gesamte Logik für den Zähler jetzt in RxCounter gekapselt (wir werden die Implementierung später zeigen).

count ist ein RxJS-Observable, das den neuen Zählstatus ausgibt. Inkrement ist eine Aktionsmethode, die die Benutzeroberfläche aufrufen kann, um Statusänderungen aufzurufen.

Svelte verfügt über eine schöne integrierte Möglichkeit, Observablen in der Vorlage zu abonnieren, wie mit der Vorlagenvariablen $count zu sehen ist. Das Abonnieren eines Observables in einem beliebigen UI-Framework ist nicht besonders schwierig, und viele Frameworks verfügen über APIs, die dabei helfen.

RxCounter implementieren

Informationen und Haftungsausschluss: Wir werden die vom Autor erstellte Reactables-API verwenden. Es handelt sich um eine Zustandsverwaltungslösung, die RxJS nutzt, um die reaktive Programmierung zu vereinfachen.

Holen Sie sich das Reactables-Kernpaket und erstellen Sie RxCounter.

npm i @reactables/core

import { RxBuilder } from '@reactables/core';

export const RxCounter = () =>
  RxBuilder({
    initialState: 0,
    reducers: {
      increment: (count) => count + 1,
    },
  });

RxBuilder gibt ein Reactable zurück.

Ein Reactable ist ein Tupel, dessen erstes Element ein RxJS-Observable ist, das Zustandsänderungen ausgibt, und dessen zweites Element ein Wörterbuch mit Aktionsmethoden zum Auslösen von Zustandsaktualisierungen ist.

Der Zustand ist reaktiv, was bedeutet, dass der Zustand über seine Reduzierfunktionen auf Änderungen reagiert. Wenn eine von der Benutzeroberfläche ausgelöste Inkrementierungsaktion empfangen wird, reagiert das Reagierbare und sein Observable gibt den neuen Zustand aus.

Hinweis: RxCounter ist jetzt vollständig von der Ansichtsebene entkoppelt und kann in jedem UI-Framework verwendet werden!

Testen des Zählers

Um ein Reactable zu testen, abonnieren wir seinen beobachtbaren Zustand und rufen seine Aktionsmethoden auf, um sein Verhalten zu testen. Wir können behaupten, dass die ausgegebenen Werte des Observablen mit dem gewünschten Verhalten übereinstimmen.

Dies kann mit dem in RxJS integrierten Marble Testing durchgeführt werden.

<script>
  let count = $state(0);
</script>

<button onclick="{()"> count++}>
  clicks: {count}
</button>

Erweiterung der Theke

Wenn die Statuslogik von der Ansicht isoliert ist, können wir auch die Funktionalität von RxCounter erweitern und einen RxDoubleCounter erstellen, der die Anzahl verdoppeln kann.

<script>
  import { RxCounter } from './RxCounter';

  const [count, { increment }] = RxCounter();
</script>

<button onclick="{increment}">
  Count: {$count}
</button>

Siehe vollständiges Beispiel auf StackBlitz

Abschluss

Die direkte Implementierung der Statuslogik in UI-Komponenten erschwert die Wiederverwendung und das Testen der Logik.

Wir können die Zustandslogik reaktiv mit Reactables programmieren und isoliert testen. Dadurch entsteht eine Einheit reaktiver Zustandslogik, die sowohl in der Ansichts- als auch in der Logikschicht in hohem Maße wiederverwendbar ist.

Wir haben hier ein einfaches Gegenbeispiel erstellt, aber Reactables sind erweiterbar und für viel komplexere Zustandsverwaltungsszenarien (z. B. Datenabruf, Formulare usw.) zusammensetzbar. Schauen Sie sich die Dokumente an, um mehr zu erfahren!

Das obige ist der detaillierte Inhalt vonWiederverwendbare, erweiterbare und testbare Zustandslogik mit reaktiver Programmierung.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!