• 7. Mai 2016

Redux für OO-Entwickler kurz und bündig erklärt (Deutsche Version)

Please find the English Version of this article here.

Das Muster hinter Redux hilft bei der Strukturierung komplexer GUIs, indem es den gesamten Anwendungszustand in einem zentralen Zustandsbaum (Single Immutable State Tree). Aufgrund seiner funktionalen Natur wirkt es für Entwickler aus der objektorientierten Welt häufig ein wenig mystisch. Allerdings lässt sich Redux unter Nutzung bekannter Muster eigentlich sehr einfach erklären. Nachfolgend unternehme ich mal einen Versuch dazu. Ergänzend dazu findet man ein vollständiges Beispiel für Redux, das Angular 2 und @ngrx/store nutzt, hier. Eine etwas ausführlichere Beschreibung von Redux und @ngrx/store für Angular 2 findet man hingegen in meinem Artikel bei Heise Online.

  • Eine Action entspricht auf dem ersten Blick einem Command. Im Gegensatz zum Command-Muster findet sich jedoch die eigentliche Ausführungslogik in den einzelnen Reducern, welche jeweils für einen Hauptzweig des State Trees eingerichtet wird. Auf diese Weise können mehrere Reducer ein und die selbe Action behandeln.

  • Die Vorteile des Command-Patterns bleiben jedoch erhalten: Einfache Implementierung von Undo/Redo via Stacks, Protokollierung, Batch-Commands etc.

  • Die Kommunikation zwischen Store und Anwendung erfolgt via CQRS. Commands werden durch Actions beschrieben.

  • Zum lesenden Zugriff auf den State Tree kommt i. d. R. das Observer-Muster zum Einsatz. Auf diese Weise kann sich die Anwendung über Änderungen bestimmter Teile des State Trees informieren lassen. Für jeden zu überwachenden Ast richtet die Anwendung einen Observer ein.

  • Um das Erkennen von Änderungen nach dem Ausführen der Reducer zu vereinfachen, kommt ein Immutable State Tree zum Einsatz. Somit muss der Store pro Observer nur eine Prüfung durchführen anstatt den gesamten Teilbaum zu untersuchen.

Redux, like in @rxjs for Angular 2

 

 
Hier können Sie eine Anfrage für eine unverbindliche Schulung ode Beratung bzw. einen Workshop erstellen.
 
Unverbindliche Anfrage
 
 

Schulungen

Angular Schulung: Strukturierte Einführung

Lernen Sie in dieser interaktiven Schulung anhand einer Beispielanwendung den Einsatz von Angular für Ihre erfolgreichen Projekte kennen. Sie durchdringen die Hintergründe und bauen von der ersten Minute an auf Best Practices auf.

Details

Advanced Angular: Enterprise-Anwendungen und Architektur

In dieser Schulung erfahren Sie alles für die Entwicklung großer Anwendungen mit Angular: Mono-Repos, Micro-Apps, State Management, Performance und mehr

Details

Angular: Strukturierte Einführung

Seit der Ankündigung von Angular (2+) fragen sich Entwicklungs-Teams, welche Migrationspfade für AngularJS-1.x-Anwendungen vorliegen werden. Das im Lieferumfang von Angular enthaltene ngUpgrade bietet eine Antwort darauf. Es erlaubt einen Parallelbetrieb von AngularJS 1.x und Angular (2+) und stellt somit die Grundlage für eine schrittweise Migration dar.

Details

Progressive Web-Apps mit Angular

Progressive Web Apps bieten den Komfort nativer Anwendungen, indem sie auf moderne Browser APIs, wie Service Worker, setzen. Sie sind installierbar sowie offlinefähig und nutzen Hintergrundprozesse für Datensynchronisation und Push-Notifications. Diese Schulung zeigt anhand eines durchgehenden Beispiels was sich genau hinter diesem neuen Konzept verbirgt, wie solche Anwendungen mit Angular entwickelt werden und wie Sie in Ihren Projekten von den dahinterstehenden Ideen profitieren.

Details

Reaktive Architekturen mit Angular und Redux

Dieses interaktive Seminar vermittelt, wie Sie reaktive Anwendungen mit Angular entwickeln können.

Details

TypeScript

TypeScript gibt Ihnen alle Möglichkeiten der neuen JavaScript-Standards und zusätzlich ein statisches Typsystem, das dabei hilft, Fehler möglichst früh zu erkennen. Außerdem ist TypeScript die Grundlage für Angular. In diesem interaktiven Seminar lernen Sie diese mächtige Sprache anhand einer Fallstudie kennen.

Details

Weitere Schulungen ...