Die Präsentation von Manfred Steyer erläutert die Konzepte hinter Redux in Angular 2 und @ngrx/store, insbesondere wie Redux komplexe Benutzeroberflächen verwaltbar macht und welche Vorteile es bietet, wie eine zentrale Quelle der Wahrheit und einfache Testbarkeit. Es werden die verschiedenen Bestandteile wie Actions, Reducer und Store vorgestellt, sowie die Anwendung von Immutable-Datenstrukturen zur Verbesserung der Performance. Die Diskussion endet mit einem Fazit, das die Vorteile von zentralem Zustand und den Einsatz von Observables zur Performance-Optimierung zusammenfasst.

1. 26.09.2016
1
Single Page Applications neu gedacht:
Redux in Angular 2 mit @ngrx/store
Manfred Steyer
ManfredSteyer
About me …
• Manfred Steyer
• SOFTWAREarchitekt.at
• Trainer & Consultant
• GDE & MVP
• Focus: Angular
Page  2
ManfredSteyer

2. 26.09.2016
2
Ziel
• Ideen hinter Redux mit Angular 2 und @ngrx/store kennen lernen
• Redux anhand eines Beispiels in Aktion sehen
Nicht-Ziel
• Einführung in Angular 2

3. 26.09.2016
3
Inhalt
Motivation
Actions
Reducer
Store
Immutables
DEMO
Demo App

4. 26.09.2016
4
Motivation
App
Home Booking Boarding

5. 26.09.2016
5
App
Home Booking Boarding
FlightService PassengerService BoardingService
App
Home Booking Boarding
FlightService PassengerService BoardingService
 Verworren
 Schwer Nachvollziehbar
 Keine Struktur

6. 26.09.2016
6
Redux
• Redux hilft, komplexe UIs beherrschbar zu machen
• Ursprung: React
App
Home Booking Boarding
Store
State
… boarding
… …
Boarding
Reducer
State State StateAction Action Action
Action
…
Reducer
Action
Single Immutable State Tree
…

7. 26.09.2016
7
App
Home Booking Boarding
Store
State
… boarding
… …
Boarding
Reducer
State State StateAction Action Action
Action
…
Reducer
Action
Single Immutable State Tree
…
 Eine einzige „Quelle der
Wahrheit“
 Einfach zu speichern
 Einfach zu debuggen
 Undo/Redo
 Immutables und Observables
 Performance
 Lesen: Direkt
 Schreiben: Via Reducer
Action

8. 26.09.2016
8
Teile einer Action
Type
Payload
{
type: 'BOOKINGS_LOADED',
payload: [
{ flightId: 7, passengerId: 17, …},
…
]
}
Reducer

9. 26.09.2016
9
Reducer
• Bringt Aktion zur Ausführung
• Pure Funktion
• Eingabe bestimmen Ausgaben
• Keine Seiteneffekte
• Zustandslos
• Einfach zu testen
Reducer
(currentStateTree, action) => newStateTree

10. 26.09.2016
10
Store
Store
Verwaltet State Tree
Gewährt lesenden Zugriff (Pub/Sub über Observables)
Gewährt schreibenden Zugriff über Aktionen

11. 26.09.2016
11
Store
dispatch(action)
select(tree => tree.borarding.statistics): Observable
Immutables?

12. 26.09.2016
12
Immutables
• Unveränderbare Objekte
• Wenn sich repräsentierte Daten ändern:
Neues Objekt erzeugen
• Man kann einfach herausfinden, ob sich etwas geändert hat
• oldObject == newObject
• Mit oder ohne Bibliotheken möglich (wie immutable.js)
Immutables
const ONE_MINUTE = 1000 * 60;
let oldFlights = this.flights;
let oldFlight = oldFlights[0]; // Flight to change!
let oldFlightDate = new Date(oldFlight.datum); // Date to change

13. 26.09.2016
13
Immutables
let newFlightDate = new Date(oldFlightDate.getTime() + ONE_MINUTE * 15);
let newFlight = {
id: oldFlight.id,
abflugort: oldFlight.abflugort,
zielort: oldFlight.zielort,
datum: newFlightDate.toISOString()
};
let newFlights = [
newFlight,
...oldFlights.slice(1, this.fluege.length-1)
];
this.flights = newFlights;
Checking for Change
console.debug("Array: " + (oldFlights == newFlights)); // false
console.debug("#0: " + (oldFlights[0] == newFlights[0])); // false
console.debug("#1: " + (oldFlights[1] == newFlights[1])); // true

14. 26.09.2016
14
App
Home Booking Boarding
Store
State
… boarding
… …
Boarding
Reducer
State State StateAction Action Action
Action
…
Reducer
Action
Single Immutable State Tree
…
DEMO

15. 26.09.2016
15
DEMO
UNDO/REDO

16. 26.09.2016
16
Undo/Redo
State0
Undo/Redo
State1
State0
Undo Stack

17. 26.09.2016
17
Undo/Redo
State1
State0
Undo Stack
State2
Undo/Redo
State1
State0
Undo Stack
State3
State2

18. 26.09.2016
18
Undo/Redo
State1
State0
Undo Stack
State3
State2
UNDO
Undo/Redo
State1
State0
Undo Stack
State3
State2
UNDO

19. 26.09.2016
19
Undo/Redo
State1
State0
Undo Stack
State3
State2
UNDO
Redo Stack
Undo/Redo
State1
State0
Undo Stack
State2
State3
Redo Stack

20. 26.09.2016
20
Undo/Redo
State1
State0
Undo Stack
State2
State3
Redo Stack
REDO
Undo/Redo
State1
State0
Undo Stack
State3
State2

21. 26.09.2016
21
DEMO
Fazit
• Zentraler Zustand vereinfacht Abgleich zwischen Komponenten
• Immutables: Performance und Nachvollziehbarkeit
• Observables: Performance
• Actions: Nachvollziehbarkeit, Undo/Redo
• Reducer: Testbarkeit
• Tools für „Zeitreise“
• Kritik: Immutability braucht ein wenig Übung!
• Aber: Ansätze machen auch isoliert voneinander Sinn!

22. 26.09.2016
22
Kontakt
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer