Entwicklungserfahrung verbessern
Als ich mit Kollegen aus verschiedenen Unternehmen sprach, bemerkte ich, dass so viele Teams NgRx lieben. Bei unseren Gesprächen hat mich der Gedanke nicht verlassen:
"Es wäre schön, weniger Code zu verwalten und den Schreibanleitungen mehr zu folgen, um die spätere Skalierung zu erleichtern . "
Dies veranlasste mich, verschiedene Redux-Refactoring-Techniken zu untersuchen. Ich habe mir ein Video angesehen, Redux-Artikel und -Dokumente gelesen. Am Ende habe ich ein Plugin für NgRx namens NgRx Ducks geschrieben
Ziele
Grundsätzlich wurde ngrx-ducks entwickelt , um die Arbeit mit NgRx zu vereinfachen.
- Vereinfachtes Action-Handling mit der Decorator-API , die den Code reduziert, der geschrieben werden muss, um sowohl den Reducer als auch den Action- Creator zu konfigurieren. NgRx Ducks generiert automatisch Aktionsersteller und Reduzierungsfunktionen .
- Weniger technischer Support, da Sie keine Aufzählungen oder Gewerkschaftstypen schreiben müssen.
- Eine übersichtlichere Anwendungslogik wird dank einer intuitiv eingegebenen API bereitgestellt, die Sie als injizierbaren Service verwenden können , der die Interaktion mit dem Store für Sie einrichtet.
Wie funktioniert es
Diese Bibliothek arbeitet als zusätzliche Ebene in NgRx. Es werden automatisch Aktionsersteller und Reduzierungsfunktionen für Sie erstellt. Darüber hinaus erhalten Sie einen Dienst, den Sie in Ihren Komponenten verwenden können. Dieser Service bietet eine streng typisierte API, mit der sowohl Aktionen ausgelöst als auch Daten aus dem Speicher ausgewählt werden können.
Die NgRx Ducks-Bibliothek ändert das vorhandene NgRx-Verhalten nicht. Es werden nur die Observable Repositories und die Versandmethode gesteuert.
Da sich NgRx Ducks ausschließlich auf den Versand und die Tatsache stützt, dass das Repository ein Observable bereitstellt, bleibt NgRx Ducks mit NgRx kompatibel, auch wenn sich in der Version wichtige Änderungen ergeben.
Installation
NgRx Ducks lässt sich nahtlos in ein bestehendes NgRx-Projekt integrieren. Installieren Sie einfach das npm-Paket und Sie können loslegen.
npm install @co-it/ngrx-ducks
Decorator API
Die Hauptidee von NgRx Ducks ist die Kombination von Aktionstypen und Mutatorlogik ( auch Reduzierer genannt ). Aus diesem Grund wurde der @ Ducksify- Dekorator hinzugefügt, um eine reguläre Klasse mit Anmerkungen zu versehen.
import { Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter {}
Mit dem Dekorator können Sie den Anfangszustand Ihres Staates angeben. Durch das Bestehen von initialState kann NgRx Ducks später automatisch eine Reduzierungsfunktion generieren.
Jetzt können Sie die Mutationslogik direkt in der Klasse platzieren. Es ist nicht mehr erforderlich, Switch-Case-Ausdrücke zu schreiben. Stattdessen erstellen wir mithilfe des Aktionsdekorators eine Zuordnung zwischen dem Aktionstyp und der Mutationslogik.
import { Action, Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ }) export class Counter { @Action('[Counter] Increase by passed value') increaseBy(state: number, payload: number): number { return state + payload; } }
NgRx Ducks bildet jede Aktion mit der entsprechenden Mutationslogik ab. Duck enthält alle notwendigen Informationen, um die Reduktionsfunktion zu generieren.
Reduzierfunktion
Reduktionsfunktionen werden automatisch mit NgRx Ducks generiert. Die ReducerFrom- Factory erstellt eine Nachschlagetabelle, um jeden Aktionstyp seiner entsprechenden Mutationslogik zuzuordnen.
import { reducerFrom, DucksifiedAction, ... } from '@co-it/ngrx-ducks'; export function reducer( state: number, action: DucksifiedAction): number { return reducerFrom(Counter)(state, action); }
Sie müssen noch reducerFrom in die exportierte Funktion einbinden , um ordnungsgemäß mit dem AoT- Compiler zusammenzuarbeiten.
Der generierte Reduzierer muss mit NgRx zu ActionReducerMap hinzugefügt werden ( siehe Beispiel unten ).
Entenpower!
Das interessanteste kommt noch! Das Ziel von NgRx Ducks ist es, die Interaktion mit dem Warehouse zu vereinfachen. Mit der automatischen Generierung der Reduzierfunktion ist alles in Ordnung. Schauen wir uns also die dynamische Fassade an , die auch hier erstellt wird.
Der @ Ducksify- Dekorateur kümmert sich auch darum, Ihre Ente als Service im Angular IoC-Container zu registrieren. Dies bedeutet, dass Sie Ente in Ihre Komponente einbetten können!
Vault Action Dispatching
NgRx Ducks fügt einige Korrekturen zu Duck hinzu, mit denen Sie einfache Funktionsaufrufe verwenden können, anstatt Aktionen manuell auszulösen. Sie erhalten eine typisierte API in Ihren Komponenten.
import { Duck } from '@co-it/ngrx-ducks'; @Component({ }) export class CounterComponent { constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.counter.incrementBy(42); } }
Sie implementieren Duck, nicht Counter selbst. Duck erstellt automatisch einen Aktionsersteller für incrementBy , der die Aktion mit dem übergebenen Wert (Nutzlast) auslöst. Dank der dynamischen TypeScript-Typen erhalten Sie sofort eine automatische Vervollständigung in der IDE.
Kurz gesagt, NgRx Ducks automatisiert den gesamten Prozess der Verarbeitung von Aktionen. Sie konfigurieren die Aktion einmal in Duck und verwenden anschließend einfach die typisierte, dynamische Fassade, die automatisch für Sie generiert und aktualisiert wird.
Datenabruf aus dem Speicher
Duck verwendet NgRx-Selektoren, um Daten aus dem Speicher zu lesen. Jede Ente hat einen Helfer, der einen Selektor akzeptiert.
Stellen wir uns vor, unser Counter ist als NgRx-Funktion mit der Taste " counter " registriert. Dies würde uns die folgende Auswahleinstellung erlauben.
import { createFeatureSelector, createSelector} from '@ngrx/store'; const visitCounter = createFeatureSelector<number>('counter'); const count = createFeatureSelector<number>(count => count); @Component({ }) export class CounterComponent { count$: Observable<number>;constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.count$ = this.counter.pick(count); this.counter.incrementBy(42); } }
Sie können die Demo auf stackblitz.io ansehen .
Duck ermöglicht sowohl das Auslösen von Statusmutationen als auch das Abfragen von Daten aus dem Repository. Sie benötigen nur einen "genutzten" Service, der eine komfortable API für die Interaktion mit dem Speicher einrichtet.
Und endlich
NgRx Ducks lässt sich auch nahtlos in Effects integrieren! ABER wir werden dies erst im nächsten Artikel im Detail analysieren.
Wenn Sie es sofort erfahren möchten , können Sie auf das komplexe Beispiel verweisen, das auch auf stackblitz.io verfügbar ist.
TL; DR
- NgRx Ducks fungiert als zusätzliche Schicht auf NgRx.
- Sie können NgRx Ducks problemlos in bestehende Projekte integrieren.
- Ente
... Erzeugt automatisch Aktionsersteller und Reduzierungsfunktionen
... macht Action-Enumeratoren und Union-Typen überflüssig
... Es ist eine dynamische Fassade, die in ein Bauteil eingebettet werden kann
... bietet dynamisch getipptes Self-Dispatching, entschuldigende Aktionen
... Ermöglicht das Lesen von Daten aus dem Speicher mithilfe der Pick-API
. ... kann von Effects verwendet werden (siehe. Demo )
Das ist alles Leute!
Ich hoffe, es ist mir gelungen, Sie davon zu überzeugen, NgRx Ducks zu probieren. Ich frage mich auch, was Sie von dieser Bibliothek halten. Wenn Sie irgendwelche Ideen haben, schreiben Sie einfach auf GitHub