Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store

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

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

26.09.2016

3

Inhalt

Motivation

Actions

Reducer

Store

Immutables

DEMO

Demo App

26.09.2016

4

Motivation

App

Home Booking Boarding

26.09.2016

5

App

Home Booking Boarding

FlightService PassengerService BoardingService

App

Home Booking Boarding

FlightService PassengerService BoardingService

Verworren Schwer Nachvollziehbar Keine Struktur

26.09.2016

6

Redux

• Redux hilft, komplexe UIs beherrschbar zu machen

• Ursprung: React

App

Home Booking Boarding

Store

State

… boarding

… …

BoardingReducer

State State StateAction Action Action

Action

…Reducer

Action

Single Immutable State Tree

…

26.09.2016

7

App

Home Booking Boarding

Store

State

… boarding

… …

BoardingReducer

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

26.09.2016

8

Teile einer Action

Type

Payload

{type: 'BOOKINGS_LOADED',payload: [

{ flightId: 7, passengerId: 17, …}, …

]}

Reducer

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

26.09.2016

10

Store

Store

Verwaltet State Tree

Gewährt lesenden Zugriff (Pub/Sub über Observables)

Gewährt schreibenden Zugriff über Aktionen

26.09.2016

11

Store

dispatch(action)

select(tree => tree.borarding.statistics): Observable

Immutables?

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

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

26.09.2016

14

App

Home Booking Boarding

Store

State

… boarding

… …

BoardingReducer

State State StateAction Action Action

Action

…Reducer

Action

Single Immutable State Tree

…

DEMO

26.09.2016

15

DEMO

UNDO/REDO

26.09.2016

16

Undo/Redo

State0

Undo/Redo

State1

State0

Undo Stack

26.09.2016

17

Undo/Redo

State1

State0

Undo Stack

State2

Undo/Redo

State1

State0

Undo Stack

State3

State2

26.09.2016

18

Undo/Redo

State1

State0

Undo Stack

State3

State2

UNDO

Undo/Redo

State1

State0

Undo Stack

State3

State2

UNDO

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

26.09.2016

20

Undo/Redo

State1

State0

Undo Stack

State2

State3

Redo Stack

REDO

Undo/Redo

State1

State0

Undo Stack

State3

State2

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!

26.09.2016

22

Kontakt

[mail] manfred.steyer@SOFTWAREarchitekt.at

[web] SOFTWAREarchitekt.at

[twitter] ManfredSteyer