Tutorial zu Ngrx und Angular 2: Erstellen einer reaktiven Anwendung

Wir sprechen viel über reaktive Programmierung im Angular-Bereich. Reaktive Programmierung und Angular 2 scheinen Hand in Hand zu gehen. Für jemanden, der mit beiden Technologien nicht vertraut ist, kann es jedoch eine ziemlich entmutigende Aufgabe sein, herauszufinden, worum es geht.

In diesem Artikel erfahren Sie durch das Erstellen einer reaktiven Angular 2-Anwendung mit Ngrx, was das Muster ist, wo sich das Muster als nützlich erweisen kann und wie das Muster verwendet werden kann, um bessere Angular 2-Anwendungen zu erstellen.

Ngrx ist eine Gruppe von Angular-Bibliotheken für reaktive Erweiterungen. Ngrx/Store implementiert das Redux-Muster unter Verwendung der bekannten RxJS-Observables von Angular 2. Es bietet mehrere Vorteile, indem es Ihren Anwendungsstatus auf einfache Objekte vereinfacht, einen unidirektionalen Datenfluss erzwingt und vieles mehr. Die Ngrx/Effects-Bibliothek ermöglicht es der Anwendung, mit der Außenwelt zu kommunizieren, indem sie Nebeneffekte auslöst.

Was ist reaktive Programmierung?

Reaktive Programmierung ist ein Begriff, den man heutzutage oft hört, aber was bedeutet er wirklich?

Reaktive Programmierung ist eine Art und Weise, wie Anwendungen Ereignisse und Datenflüsse in Ihren Anwendungen handhaben. Bei der reaktiven Programmierung entwerfen Sie Ihre Komponenten und andere Teile Ihrer Software, um auf diese Änderungen zu reagieren, anstatt nach Änderungen zu fragen. Das kann eine große Veränderung sein.

Wie Sie vielleicht wissen, ist RxJS ein großartiges Werkzeug für die reaktive Programmierung.

Durch die Bereitstellung von Observables und einer Vielzahl von Operatoren zum Transformieren eingehender Daten hilft Ihnen diese Bibliothek bei der Behandlung von Ereignissen in Ihrer Anwendung. Tatsächlich können Sie mit Observables ein Ereignis als einen Strom von Ereignissen sehen und nicht als einmaliges Ereignis. Auf diese Weise können Sie sie beispielsweise kombinieren, um ein neues Ereignis zu erstellen, dem Sie zuhören werden.

Reaktive Programmierung ist eine Veränderung in der Art und Weise, wie Sie zwischen verschiedenen Teilen einer Anwendung kommunizieren. Anstatt Daten direkt an die Komponente oder den Dienst zu schieben, der sie benötigt, reagiert bei der reaktiven Programmierung die Komponente oder der Dienst auf Datenänderungen.

Ein Wort zu Ngrx

Um die Anwendung zu verstehen, die Sie in diesem Tutorial erstellen werden, müssen Sie sich kurz mit den Kernkonzepten von Redux befassen.

Speichern

Der Speicher kann als Ihre clientseitige Datenbank angesehen werden, aber was noch wichtiger ist, er spiegelt den Status Ihrer Anwendung wider. Sie können es als die einzige Quelle der Wahrheit sehen.

Es ist das einzige, was Sie ändern, wenn Sie dem Redux-Muster folgen, und Sie ändern, indem Sie Aktionen darauf senden.

Reduzierer

Reducer sind die Funktionen, die wissen, was mit einer bestimmten Aktion und dem vorherigen Zustand Ihrer App zu tun ist.

Die Reduzierer übernehmen den vorherigen Zustand aus Ihrem Speicher und wenden eine reine Funktion darauf an. Rein bedeutet, dass die Funktion immer den gleichen Wert für die gleiche Eingabe zurückgibt und keine Seiteneffekte hat. Aus dem Ergebnis dieser reinen Funktion haben Sie einen neuen Zustand, der in Ihrem Geschäft abgelegt wird.

Aktionen

Aktionen sind die Nutzlast, die erforderliche Informationen enthält, um Ihr Geschäft zu ändern. Grundsätzlich hat eine Aktion einen Typ und eine Nutzlast, die Ihre Reduzierfunktion benötigt, um den Zustand zu ändern.

Dispatcher

Dispatcher sind einfach ein Einstiegspunkt für Sie, um Ihre Aktion zu versenden. In Ngrx gibt es eine Versandmethode direkt im Shop.

Middleware

Middleware sind einige Funktionen, die jede gesendete Aktion abfangen, um Nebeneffekte zu erzeugen, auch wenn Sie sie in diesem Artikel nicht verwenden werden. Sie sind in der Ngrx/Effect-Bibliothek implementiert, und es besteht eine große Chance, dass Sie sie beim Erstellen realer Anwendungen benötigen.

Warum Ngrx verwenden?

Komplexität

Der Speicher und der unidirektionale Datenfluss reduzieren die Kopplung zwischen Teilen Ihrer Anwendung erheblich. Diese reduzierte Kopplung reduziert die Komplexität Ihrer Anwendung, da sich jeder Teil nur um bestimmte Zustände kümmert.

Werkzeuge

Der gesamte Status Ihrer Anwendung wird an einem Ort gespeichert, sodass Sie einfach einen globalen Überblick über Ihren Anwendungsstatus haben und während der Entwicklung hilfreich sind. Mit Redux kommen auch viele nette Entwicklungswerkzeuge, die den Store nutzen und zum Beispiel helfen können, einen bestimmten Zustand der Anwendung zu reproduzieren oder Zeitreisen zu machen.

Architektonische Einfachheit

Viele der Vorteile von Ngrx sind mit anderen Lösungen erreichbar; Schließlich ist Redux ein architektonisches Muster. Wenn Sie jedoch eine Anwendung erstellen müssen, die sich hervorragend für das Redux-Muster eignet, z. B. kollaborative Bearbeitungswerkzeuge, können Sie ganz einfach Funktionen hinzufügen, indem Sie dem Muster folgen.

Obwohl Sie nicht darüber nachdenken müssen, was Sie tun, wird das Hinzufügen einiger Dinge wie Analysen zu all Ihren Anwendungen trivial, da Sie alle gesendeten Aktionen verfolgen können.

Kleine Lernkurve

Da dieses Muster so weit verbreitet und einfach ist, ist es für neue Leute in Ihrem Team wirklich einfach, schnell nachzuholen, was Sie getan haben.

Ngrx glänzt am besten, wenn Sie viele externe Akteure haben, die Ihre Anwendung ändern können, wie z. B. ein Überwachungs-Dashboard. In diesen Fällen ist es schwierig, alle eingehenden Daten zu verwalten, die an Ihre Anwendung gepusht werden, und die Zustandsverwaltung wird schwierig. Deshalb möchten Sie es mit einem unveränderlichen Zustand vereinfachen, und das ist eine Sache, die uns der Ngrx-Store bietet.

Erstellen einer Anwendung mit Ngrx

Die Leistungsfähigkeit von Ngrx glänzt am meisten, wenn Sie externe Daten haben, die in Echtzeit an unsere Anwendung übertragen werden. Lassen Sie uns vor diesem Hintergrund ein einfaches Freelancer-Raster erstellen, das Online-Freelancer anzeigt und es Ihnen ermöglicht, sie zu filtern.

Einrichten des Projekts

Angular CLI ist ein großartiges Tool, das den Einrichtungsprozess erheblich vereinfacht. Möglicherweise möchten Sie es nicht verwenden, aber denken Sie daran, dass der Rest dieses Artikels es verwenden wird.

 npm install -g @angular/cli

Als Nächstes möchten Sie eine neue Anwendung erstellen und alle Ngrx-Bibliotheken installieren:

 ng new toptal-freelancers npm install ngrx --save

Freelancer Reducer

Reducer sind ein Kernstück der Redux-Architektur, warum also nicht beim Erstellen der Anwendung damit beginnen?

Erstellen Sie zunächst einen „Freiberufler“-Reduzierer, der jedes Mal, wenn eine Aktion an das Geschäft gesendet wird, für die Erstellung unseres neuen Status verantwortlich ist.

freelancer-grid/freelancers.reducer.ts

 import { Action } from '@ngrx/store'; export interface AppState { freelancers : Array<IFreelancer> } export interface IFreelancer { name: string, email: string, thumbnail: string } export const ACTIONS = { FREELANCERS_LOADED: 'FREELANCERS_LOADED', } export function freelancersReducer( state: Array<IFreelancer> = [], action: Action): Array<IFreelancer> { switch (action.type) { case ACTIONS.FREELANCERS_LOADED: // Return the new state with the payload as freelancers list return Array.prototype.concat(action.payload); default: return state; } }

Hier ist also unser Freiberufler-Reduzierer.

Diese Funktion wird jedes Mal aufgerufen, wenn eine Aktion durch den Store gesendet wird. Wenn die Aktion FREELANCERS_LOADED ist, wird ein neues Array aus der Aktionsnutzlast erstellt. Wenn dies nicht der Fall ist, wird die alte Zustandsreferenz zurückgegeben, und es wird nichts angehängt.

Hierbei ist zu beachten, dass bei Rückgabe der alten Zustandsreferenz der Zustand als unverändert betrachtet wird. Das heißt, wenn Sie ein state.push(something) , wird der Zustand nicht als geändert betrachtet. Denken Sie daran, während Sie Ihre Reduzierfunktionen ausführen.

Zustände sind unveränderlich. Bei jeder Änderung muss ein neuer Zustand zurückgegeben werden.

Freelancer Grid-Komponente

Erstellen Sie eine Rasterkomponente, um unsere Online-Freiberufler anzuzeigen. Zunächst wird nur angezeigt, was sich im Geschäft befindet.

 ng generate component freelancer-grid

Fügen Sie Folgendes in freelancer-grid.component.ts ein

 import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState, IFreelancer, ACTIONS } from './freelancer-reducer'; import * as Rx from 'RxJS'; @Component({ selector: 'app-freelancer-grid', templateUrl: './freelancer-grid.component.html', styleUrls: ['./freelancer-grid.component.scss'], }) export class FreelancerGridComponent implements OnInit { public freelancers: Rx.Observable<Array<IFreelancer>>; constructor(private store: Store<AppState>) { this.freelancers = store.select('freelancers'); } }

Und das Folgende in freelancer-grid.component.html :

 <span class="count">Number of freelancers online: {{(freelancers | async).length}}</span> <div class="freelancer fade thumbail" *ngFor="let freelancer of freelancers | async"> <button type="button" class="close" aria-label="Close" (click)="delete(freelancer)"><span aria-hidden="true">&times;</span></button><br> <img class="img-circle center-block" src="{{freelancer.thumbnail}}" /><br> <div class="info"><span><strong>Name: </strong>{{freelancer.name}}</span> <span><strong>Email: </strong>{{freelancer.email}}</span></div> <a class="btn btn-default">Hire {{freelancer.name}}</a> </div>

Also, was hast du gerade getan?

Zunächst haben Sie eine neue Komponente namens freelancer-grid erstellt.

Die Komponente enthält eine Eigenschaft namens freelancers , die Teil des im Ngrx-Store enthaltenen Anwendungsstatus ist. Durch die Verwendung des Select-Operators entscheiden Sie sich dafür, nur von der freelancers -Eigenschaft über den gesamten Bewerbungsstatus benachrichtigt zu werden. Jedes Mal, wenn sich die freelancers -Eigenschaft des Bewerbungsstatus ändert, wird Ihr Observable benachrichtigt.

Das Schöne an dieser Lösung ist, dass Ihre Komponente nur eine Abhängigkeit hat, und es ist der Speicher, der Ihre Komponente viel weniger komplex und leicht wiederverwendbar macht.

Im Vorlagenteil haben Sie nichts zu Komplexes getan. Beachten Sie die Verwendung einer asynchronen Pipe in *ngFor . Das freelancers Observable ist nicht direkt iterierbar, aber dank Angular haben wir die Tools, um es zu entpacken und den Dom mithilfe der Async-Pipe an seinen Wert zu binden. Das macht die Arbeit mit dem Observable so viel einfacher.

Hinzufügen der Funktion Freiberufler entfernen

Nachdem Sie nun über eine funktionale Basis verfügen, fügen wir der Anwendung einige Aktionen hinzu.

Sie wollen einen Freiberufler aus dem Staat entfernen können. Je nachdem, wie Redux funktioniert, müssen Sie diese Aktion zuerst in jedem Zustand definieren, der davon betroffen ist.

In diesem Fall ist es nur der freelancers -Reduzierer:

 export const ACTIONS = { FREELANCERS_LOADED: 'FREELANCERS_LOADED', DELETE_FREELANCER: 'DELETE_FREELANCER', } export function freelancersReducer( state: Array<IFreelancer> = [], action: Action): Array<IFreelancer> { switch (action.type) { case ACTIONS.FREELANCERS_LOADED: // Return the new state with the payload as freelancers list return Array.prototype.concat(action.payload); case ACTIONS.DELETE_FREELANCER: // Remove the element from the array state.splice(state.indexOf(action.payload), 1); // We need to create another reference return Array.prototype.concat(state); default: return state; } }

Hier ist es wirklich wichtig, ein neues Array aus dem alten zu erstellen, um einen neuen unveränderlichen Zustand zu haben.

Jetzt können Sie Ihrer Komponente eine Funktion zum Löschen von Freiberuflern hinzufügen, die diese Aktion an das Geschäft weiterleitet:

 delete(freelancer) { this.store.dispatch({ type: ACTIONS.DELETE_FREELANCER, payload: freelancer, }) }

Sieht das nicht einfach aus?

Sie können jetzt einen bestimmten Freiberufler aus dem Bundesstaat entfernen, und diese Änderung wird durch Ihre Bewerbung weitergegeben.

Was ist nun, wenn Sie der Anwendung eine weitere Komponente hinzufügen, um zu sehen, wie sie über den Store miteinander interagieren können?

Filterreduzierer

Beginnen wir wie immer mit dem Reduzierstück. Für diese Komponente ist es ganz einfach. Sie möchten, dass der Reduzierer immer einen neuen Zustand mit nur der von uns gesendeten Eigenschaft zurückgibt. Es sollte so aussehen:

 import { Action } from '@ngrx/store'; export interface IFilter { name: string, email: string, } export const ACTIONS = { UPDATE_FITLER: 'UPDATE_FITLER', CLEAR_FITLER: 'CLEAR_FITLER', } const initialState = { name: '', email: '' }; export function filterReducer( state: IFilter = initialState, action: Action): IFilter { switch (action.type) { case ACTIONS.UPDATE_FITLER: // Create a new state from payload return Object.assign({}, action.payload); case ACTIONS.CLEAR_FITLER: // Create a new state from initial state return Object.assign({}, initialState); default: return state; } }

Filterkomponente

 import { Component, OnInit } from '@angular/core'; import { IFilter, ACTIONS as FilterACTIONS } from './filter-reducer'; import { Store } from '@ngrx/store'; import { FormGroup, FormControl } from '@angular/forms'; import * as Rx from 'RxJS'; @Component({ selector: 'app-filter', template: '<form class="filter">'+ '<label>Name</label>'+ '<input type="text" [formControl]="name" name="name"/>'+ '<label>Email</label>'+ '<input type="text" [formControl]="email" name="email"/>'+ '<a (click)="clearFilter()" class="btn btn-default">Clear Filter</a>'+ '</form>', styleUrls: ['./filter.component.scss'], }) export class FilterComponent implements OnInit { public name = new FormControl(); public email = new FormControl(); constructor(private store: Store<any>) { store.select('filter').subscribe((filter: IFilter) => { this.name.setValue(filter.name); this.email.setValue(filter.email); }) Rx.Observable.merge(this.name.valueChanges, this.email.valueChanges).debounceTime(1000).subscribe(() => this.filter()); } ngOnInit() { } filter() { this.store.dispatch({ type: FilterACTIONS.UPDATE_FITLER, payload: { name: this.name.value, email: this.email.value, } }); } clearFilter() { this.store.dispatch({ type: FilterACTIONS.CLEAR_FITLER, }) } }

Zunächst haben Sie eine einfache Vorlage erstellt, die ein Formular mit zwei Feldern (Name und E-Mail) enthält, das unseren Status widerspiegelt.

Sie halten diese Felder mit dem Status ganz anders synchron als mit dem Status der freelancers . Tatsächlich haben Sie, wie Sie gesehen haben, den Filterstatus abonniert, und jedes Mal, wenn er auslöst, weisen Sie formControl den neuen Wert zu.

Das Schöne an Angular 2 ist, dass es Ihnen viele Werkzeuge zur Verfügung stellt, um mit Observables zu interagieren.

Sie haben die Async-Pipe bereits gesehen, und jetzt sehen Sie die formControl -Klasse, mit der Sie den Wert einer Eingabe beobachten können. Dies ermöglicht ausgefallene Dinge wie das, was Sie in der Filterkomponente getan haben.

Wie Sie sehen können, verwenden Sie Rx.observable.merge , um die beiden von Ihren formControls angegebenen Observables zu kombinieren, und entprellen dann dieses neue Observable, bevor Sie die filter auslösen.

Einfacher ausgedrückt warten Sie eine Sekunde, nachdem sich entweder der Name oder die E-Mail formControl geändert haben, und rufen dann die filter auf.

Ist das nicht toll?

All das ist in wenigen Codezeilen erledigt. Dies ist einer der Gründe, warum Sie RxJS lieben werden. Es ermöglicht Ihnen, viele dieser ausgefallenen Dinge einfach zu tun, die sonst komplizierter gewesen wären.

Kommen wir nun zu dieser Filterfunktion. Was tut es?

Es sendet einfach die UPDATE_FILTER Aktion mit dem Wert des Namens und der E-Mail, und der Reducer kümmert sich um die Änderung des Status mit diesen Informationen.

Kommen wir zu etwas Interessanterem.

Wie sorgen Sie dafür, dass dieser Filter mit Ihrem zuvor erstellten Freelancer-Raster interagiert?

Einfach. Sie müssen nur den Filterteil des Ladens anhören. Mal sehen, wie der Code aussieht.

 import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState, IFreelancer, ACTIONS } from './freelancer-reducer'; import { IFilter, ACTIONS as FilterACTIONS } from './../filter/filter-reducer'; import * as Rx from 'RxJS'; @Component({ selector: 'app-freelancer-grid', templateUrl: './freelancer-grid.component', styleUrls: ['./freelancer-grid.component.scss'], }) export class FreelancerGridComponent implements OnInit { public freelancers: Rx.Observable<Array<IFreelancer>>; public filter: Rx.Observable<IFilter>; constructor(private store: Store<AppState>) { this.freelancers = Rx.Observable.combineLatest(store.select('freelancers'), store.select('filter'), this.applyFilter); } applyFilter(freelancers: Array<IFreelancer>, filter: IFilter): Array<IFreelancer> { return freelancers .filter(x => !filter.name || x.name.toLowerCase().indexOf(filter.name.toLowerCase()) !== -1) .filter(x => !filter.email || x.email.toLowerCase().indexOf(filter.email.toLowerCase()) !== -1) } ngOnInit() { } delete(freelancer) { this.store.dispatch({ type: ACTIONS.DELETE_FREELANCER, payload: freelancer, }) } }

Es ist nicht komplizierter als das.

Wieder einmal haben Sie die Leistungsfähigkeit von RxJS genutzt, um den Filter- und Freiberuflerstatus zu kombinieren.

Tatsächlich wird combineLatest , wenn eines der beiden Observables ausgelöst wird, und dann jeden Zustand mit der Funktion applyFilter kombinieren. Es gibt eine neue Observable zurück, die dies tut. Wir müssen keine anderen Codezeilen ändern.

Beachten Sie, dass es der Komponente egal ist, wie der Filter erhalten, modifiziert oder gespeichert wird; er hört ihm nur zu, wie er es bei jedem anderen Staat tun würde. Wir haben nur die Filterfunktion hinzugefügt und keine neuen Abhängigkeiten hinzugefügt.

Es zum Leuchten bringen

Denken Sie daran, dass die Verwendung von Ngrx wirklich glänzt, wenn wir mit Echtzeitdaten umgehen müssen? Lassen Sie uns diesen Teil zu unserer Anwendung hinzufügen und sehen, wie es läuft.

Vorstellung des freelancers-service .

 ng generate service freelancer

Der Freelancer-Dienst simuliert den Echtzeitbetrieb mit Daten und sollte so aussehen.

 import { Injectable } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState, IFreelancer, ACTIONS } from './freelancer-grid/freelancer-reducer'; import { Http, Response } from '@angular/http'; @Injectable() export class RealtimeFreelancersService { private USER_API_URL = 'https://randomuser.me/api/?results=' constructor(private store: Store<AppState>, private http: Http) { } private toFreelancer(value: any) { return { name: value.name.first + ' ' + value.name.last, email: value.email, thumbail: value.picture.large, } } private random(y) { return Math.floor(Math.random() * y); } public run() { this.http.get(`${this.USER_API_URL}51`).subscribe((response) => { this.store.dispatch({ type: ACTIONS.FREELANCERS_LOADED, payload: response.json().results.map(this.toFreelancer) }) }) setInterval(() => { this.store.select('freelancers').first().subscribe((freelancers: Array<IFreelancer>) => { let getDeletedIndex = () => { return this.random(freelancers.length - 1) } this.http.get(`${this.USER_API_URL}${this.random(10)}`).subscribe((response) => { this.store.dispatch({ type: ACTIONS.INCOMMING_DATA, payload: { ADD: response.json().results.map(this.toFreelancer), DELETE: new Array(this.random(6)).fill(0).map(() => getDeletedIndex()), } }); this.addFadeClassToNewElements(); }); }); }, 10000); } private addFadeClassToNewElements() { let elements = window.document.getElementsByClassName('freelancer'); for (let i = 0; i < elements.length; i++) { if (elements.item(i).className.indexOf('fade') === -1) { elements.item(i).classList.add('fade'); } } } }

Dieser Dienst ist nicht perfekt, aber er tut, was er tut, und zu Demonstrationszwecken ermöglicht er uns, einige Dinge zu demonstrieren.

Erstens ist dieser Service recht einfach. Es fragt eine Benutzer-API ab und überträgt die Ergebnisse an den Store. Es ist ein Kinderspiel, und Sie müssen nicht darüber nachdenken, wohin die Daten gehen. Es geht in den Laden, was Redux so nützlich und gefährlich zugleich macht – aber wir werden später darauf zurückkommen. Alle zehn Sekunden wählt der Dienst einige Freiberufler aus und sendet eine Operation, um sie zusammen mit einer Operation an einige andere Freiberufler zu löschen.

Wenn wir möchten, dass unser Reduzierer damit umgehen kann, müssen wir ihn modifizieren:

 import { Action } from '@ngrx/store'; export interface AppState { freelancers : Array<IFreelancer> } export interface IFreelancer { name: string, email: string, } export const ACTIONS = { LOAD_FREELANCERS: 'LOAD_FREELANCERS', INCOMMING_DATA: 'INCOMMING_DATA', DELETE_FREELANCER: 'DELETE_FREELANCER', } export function freelancersReducer( state: Array<IFreelancer> = [], action: Action): Array<IFreelancer> { switch (action.type) { case ACTIONS.INCOMMING_DATA: action.payload.DELETE.forEach((index) => { state.splice(state.indexOf(action.payload), 1); }) return Array.prototype.concat(action.payload.ADD, state); case ACTIONS.FREELANCERS_LOADED: // Return the new state with the payload as freelancers list return Array.prototype.concat(action.payload); case ACTIONS.DELETE_FREELANCER: // Remove the element from the array state.splice(state.indexOf(action.payload), 1); // We need to create another reference return Array.prototype.concat(state); default: return state; } }

Jetzt sind wir in der Lage, solche Operationen durchzuführen.

Eine Sache, die in diesem Dienst gezeigt wird, ist, dass es ziemlich wichtig ist, dies zu beachten, da alle Statusänderungen synchron durchgeführt werden. Wenn die Anwendung des Zustands asynchron war, wird der Aufruf von this.addFadeClassToNewElements(); würde nicht funktionieren, da das DOM-Element beim Aufruf dieser Funktion nicht erstellt würde.

Ich persönlich finde das ziemlich nützlich, da es die Vorhersagbarkeit verbessert.

Anwendungen erstellen, der reaktive Weg

Durch dieses Tutorial haben Sie eine reaktive Anwendung mit Ngrx, RxJS und Angular 2 erstellt.

Wie Sie gesehen haben, sind dies mächtige Werkzeuge. Was Sie hier gebaut haben, kann auch als Implementierung einer Redux-Architektur angesehen werden, und Redux ist an sich schon mächtig. Es hat jedoch auch einige Einschränkungen. Während wir Ngrx verwenden, spiegeln sich diese Einschränkungen zwangsläufig in dem Teil unserer Anwendung wider, den wir verwenden.

Das obige Diagramm ist eine grobe Darstellung der Architektur, die Sie gerade erstellt haben.

Sie werden vielleicht feststellen, dass einige Komponenten, selbst wenn sie sich gegenseitig beeinflussen, unabhängig voneinander sind. Dies ist eine Besonderheit dieser Architektur: Komponenten haben eine gemeinsame Abhängigkeit, nämlich den Store.

Eine weitere Besonderheit dieser Architektur ist, dass wir keine Funktionen aufrufen, sondern Aktionen ausführen. Eine Alternative zu Ngrx könnte darin bestehen, nur einen Dienst zu erstellen, der einen bestimmten Zustand mit Observables Ihrer Anwendungen verwaltet, und anstelle von Aktionen Funktionen für diesen Dienst aufzurufen. Auf diese Weise könnten Sie eine Zentralisierung und Reaktionsfähigkeit des Staates erreichen und gleichzeitig den problematischen Staat isolieren. Dieser Ansatz kann Ihnen helfen, den Aufwand für die Erstellung eines Reducers zu reduzieren und Aktionen als einfache Objekte zu beschreiben.

Wenn Sie das Gefühl haben, dass der Status Ihrer Anwendung aus verschiedenen Quellen aktualisiert wird und es anfängt, ein Durcheinander zu werden, ist Ngrx genau das, was Sie brauchen.