![Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt
State
13
interface Todo {
id: string;
title: string;
done: boolean;
}
interface TodoState {
todos: {
[id: string]: Todo;
};
todoList: string[];
}
{
'todoList': [
'93f37bdf-6a45-4243-913c-cd057c91c2bc',
'5d744a71-39d3-4afe-8a98-66fa3464f2aa'
],
'todos': {
'93f37bdf-6a45-4243-913c-cd057c91c2bc': {
'id': '93f37bdf-6a45-4243-913c-cd057c91c2bc',
'title': 'Buy some milk',
'done': false
},
'5d744a71-39d3-4afe-8a98-66fa3464f2aa': {
'id': '5d744a71-39d3-4afe-8a98-66fa3464f2aa',
'title': 'Take out the trash',
'done': false
},
}
}
The state is a plain object (with a fixed schema) that represents the
entire application state](https://image.slidesharecdn.com/angular-frankfurt-01-talk-180118125909/85/Angular-Frankfurt-1-Managing-Application-State-in-Reactive-Angular-Applications-13-320.jpg)
![Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt
Reducer
15
A reducer is a plain function that accepts a state and an action and
returns a new version of the state
function todoReducer(state: TodoState, action: Action) {
switch (action.type) {
case "TODOLIST:CREATE_TODO":
const id = guid();
return {
...state,
'todoList': [ ...state.todoList, id ],
'todos': {
...state.todos,
[id]: {
'id': id,
'title': action.payload.title,
'done': false
}
}
}
default:
return state;
}
}](https://image.slidesharecdn.com/angular-frankfurt-01-talk-180118125909/85/Angular-Frankfurt-1-Managing-Application-State-in-Reactive-Angular-Applications-15-320.jpg)
![Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt
Component
16
<ul *ngFor="let todo of todos$ | async">
<li>{{todo.title}}</li>
</ul>
? The component can select a slice/subtree of the state from the store
? Using the resulting Observable, the component can reactively listen for
changes in the selected subtree
todos$: Observable<Todo[]>;
constructor(private store: Store<TodoState>) {
this.todos$ = Observable.combineLatest(
this.store.select('todoList'),
this.store.select('todos')
).map([todoList, todos] => {
return todoList.map(id => todos[id]);
});
}](https://image.slidesharecdn.com/angular-frankfurt-01-talk-180118125909/85/Angular-Frankfurt-1-Managing-Application-State-in-Reactive-Angular-Applications-16-320.jpg)
![[BreizhCamp, format 15min] Construire et automatiser l'ecosyste?me de son Saa...](https://cdn.slidesharecdn.com/ss_thumbnails/20170418construireetautomatiserlecosystemedesonsaasgraceaunespecificationswagger-170426174720-thumbnail.jpg?width=560&fit=bounds)
![[Golang] 參 Mobile App 垢殻叔ｧ低M秘 Golang 議弊順 (Introduction of GoLang)](https://cdn.slidesharecdn.com/ss_thumbnails/introductionofgolang-230426113308-b649ee14-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to Angular Frankfurt #1 - Managing Application State in Reactive Angular Applications (20)
Recently uploaded (20)
Angular Frankfurt #1 - Managing Application State in Reactive Angular Applications
- 1. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Florian Reifschneider Founder at Rocketloop florian@rocketloop.de | @flo_re2003 Managing Application State in Reactive Angular Applications
- 2. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt What this talk is about 2 Managing Application State in Reactive Angular Applications
- 3. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt What this talk is about 3 Managing Application State in Reactive Angular Applications
- 4. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt What this talk is about 4 Managing Application State in Reactive Angular Applications
- 5. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt What this talk is about RxJS 5 Managing Application State in Reactive Angular Applications Angular ngrx
- 6. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Why reactive apps are cool ? Apps should be consistent ? Data is not static, but rather a stream ? Views should automatically react to changes in data ? Observables are first-level citizen in Angular 6
- 7. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Imperative and reactive patterns ? An imperative expression is calculated once, the result never changes, even when the inputs change ? A reactive expression is calculated every time the inputs change, emitting a new result to all subscribers 7 A B C+ = Imperative A1 B1 C1 + = B2 C2 A2 C3 t Reactive
- 8. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Application state ? Data fetched from server/API/back-end ? Locally created data ? Transient state / cache ? UI state 8
- 9. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Imperative state management in Angular 9 Service Service Service Component Component Internal State Internal State Internal State
- 10. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Unidirectional data flow (Flux) 10 Action Dispatcher Store View Action This is where the app state lives
- 11. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Redux-like architecture using ngrx/store 11 Component Action State Reducer ngrx/store Store subscribe dispatch Component ActionState Reducer Service ngrx/store + Services method callsubscribe Store dispatch
- 12. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt 12 Let¨s see some code!
- 13. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt State 13 interface Todo { id: string; title: string; done: boolean; } interface TodoState { todos: { [id: string]: Todo; }; todoList: string[]; } { 'todoList': [ '93f37bdf-6a45-4243-913c-cd057c91c2bc', '5d744a71-39d3-4afe-8a98-66fa3464f2aa' ], 'todos': { '93f37bdf-6a45-4243-913c-cd057c91c2bc': { 'id': '93f37bdf-6a45-4243-913c-cd057c91c2bc', 'title': 'Buy some milk', 'done': false }, '5d744a71-39d3-4afe-8a98-66fa3464f2aa': { 'id': '5d744a71-39d3-4afe-8a98-66fa3464f2aa', 'title': 'Take out the trash', 'done': false }, } } The state is a plain object (with a fixed schema) that represents the entire application state
- 14. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Action 14 An action is a plain object that represents the intended change to the state interface Action { type: string; payload?: any; } this.store.dispatch({ 'type': 'TODOLIST:CREATE_TODO', 'payload': { 'title': 'Work on Todo app' } } this.store.dispatch({ 'type': 'TODOLIST:MARK_TODO_DONE', 'payload': { 'id': '93f37bdf-6a45-4243-913c-cd057c91c2bc' } } Actions are the only way to mutate (modify) the state Actions can be understood as state transitions of our state machine
- 15. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Reducer 15 A reducer is a plain function that accepts a state and an action and returns a new version of the state function todoReducer(state: TodoState, action: Action) { switch (action.type) { case "TODOLIST:CREATE_TODO": const id = guid(); return { ...state, 'todoList': [ ...state.todoList, id ], 'todos': { ...state.todos, [id]: { 'id': id, 'title': action.payload.title, 'done': false } } } default: return state; } }
- 16. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Component 16 <ul *ngFor="let todo of todos$ | async"> <li>{{todo.title}}</li> </ul> ? The component can select a slice/subtree of the state from the store ? Using the resulting Observable, the component can reactively listen for changes in the selected subtree todos$: Observable<Todo[]>; constructor(private store: Store<TodoState>) { this.todos$ = Observable.combineLatest( this.store.select('todoList'), this.store.select('todos') ).map([todoList, todos] => { return todoList.map(id => todos[id]); }); }
- 17. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt Further thoughts ¢ How do you handle asynchronous side effects? ＄ ngrx/effects! ¢ Does it work with lazy loading? ＄ Since ngrx 4.0, yes! ¢ How can you debug reducers/actions/states? ＄ ngrx/devtools to the rescue! 17
- 18. Angular Frankfurt | #angularffm | @angularffm | fb.com/angularfrankfurt 18 Questions?