7 Peaks Software Angular Meetup July 2019. Subjecting State to Good Behavior by Phatcharaphan Ananpreechakun – Developer at Odds. Angular 8 is the newest version on the block, and comes with the effective CLI API, helping make developers experience better. Offering differential loading support for modern browser, and faster loading, and also includes Ivy renderer tree-shaking for a smaller website. See all the event details here -> http://7peakssoftware.com/angular-meetup-2019/ Stay tuned to get information about 7 Peaks Software’s next Angular meetup at https://7peakssoftware.com/events/

1. SUBJECTING STATE
TO GOOD BEHAVIOR
SUBJECTING STATE
TO GOOD BEHAVIOR

2. PHATCHARAPHAN
ANANPREECHAKUN
Developer at Odds

3. STATE
MANAGEMENT

5. MANAGE STATE
REACTIVELY

6. SUBJECTS

7. Subject

10. state.service.ts

11. requires initial value
stores current value
Notifies subscribers on subscription

12. blogStore$ = this.blogSubject.pipe(
scan((acc: IBLOG, newVal: IBLOG | IUPDATE) => {
return { ...acc, ...newVal };
}, this.initialState)
);

13. setStore(obj: IBLOG | IUPDATE) {
this.blogSubject.next(obj);
}

14. blog.service.ts

15. init$(): Observable<IBLOG> {
return this.http.get<IBLOG>(`${environment.API_URL}/blog`)
.pipe(
tap(blog => this.state.setStore(blog))
);
}
API call to get blog

16. init$(): Observable<IBLOG> {
return this.http.get<IBLOG>(`${environment.API_URL}/blog`)
.pipe(
tap(blog => this.state.setStore(blog))
);
}
set blog in store

17. addClap(obj: IUPDATE) {
this.state.setStore(obj);
}

18. blog.component.ts

19. ngOnInit() {
this.blogService.init$().subscribe(
() => this.setupClap()
);
}

20. private setupClap() {
const newVal = { clap: 0 };
const addClap = () => {
newVal.clap++;
this.blogService.addClap(newVal);
};
// Click to add a single clap
const click$ = fromEvent(this.clappingBtn.nativeElement, 'click’);
click$.subscribe(addClap);
// Hold mouse down to add clap continuously until mouse up or leave button
const mousedown$ = fromEvent(this.clappingBtn.nativeElement, 'mousedown');
const mouseup$ = fromEvent(this.clappingBtn.nativeElement, 'mouseup');
const mouseleave$ = fromEvent(this.clappingBtn.nativeElement, 'mouseleave');
const hold$ = mousedown$.pipe(
switchMap(() => interval(200).pipe(
takeUntil(
merge(mouseup$, mouseleave$)
)
))
);
hold$.subscribe(addClap);
}

21. private setupClap() {
const newVal = { clap: 0 };
const addClap = () => {
newVal.clap++;
this.blogService.addClap(newVal);
};
// Click to add a single clap
const click$ = fromEvent(this.clappingBtn.nativeElement, 'click’);
click$.subscribe(addClap);
// Hold mouse down to add clap continuously until mouse up or leave button
const mousedown$ = fromEvent(this.clappingBtn.nativeElement, 'mousedown');
const mouseup$ = fromEvent(this.clappingBtn.nativeElement, 'mouseup');
const mouseleave$ = fromEvent(this.clappingBtn.nativeElement, 'mouseleave');
const hold$ = mousedown$.pipe(
switchMap(() => interval(200).pipe(
takeUntil(
merge(mouseup$, mouseleave$)
)
))
);
hold$.subscribe(addClap);
}

22. private setupClap() {
const newVal = { clap: 0 };
const addClap = () => {
newVal.clap++;
this.blogService.addClap(newVal);
};
// Click to add a single clap
const click$ = fromEvent(this.clappingBtn.nativeElement, 'click’);
click$.subscribe(addClap);
// Hold mouse down to add clap continuously until mouse up or leave button
const mousedown$ = fromEvent(this.clappingBtn.nativeElement, 'mousedown');
const mouseup$ = fromEvent(this.clappingBtn.nativeElement, 'mouseup');
const mouseleave$ = fromEvent(this.clappingBtn.nativeElement, 'mouseleave');
const hold$ = mousedown$.pipe(
switchMap(() => interval(200).pipe(
takeUntil(
merge(mouseup$, mouseleave$)
)
))
);
hold$.subscribe(addClap);
}

23. private setupClap() {
const newVal = { clap: 0 };
const addClap = () => {
newVal.clap++;
this.blogService.addClap(newVal);
};
// Click to add a single clap
const click$ = fromEvent(this.clappingBtn.nativeElement, 'click’);
click$.subscribe(addClap);
// Hold mouse down to add clap continuously until mouse up or leave button
const mousedown$ = fromEvent(this.clappingBtn.nativeElement, 'mousedown');
const mouseup$ = fromEvent(this.clappingBtn.nativeElement, 'mouseup');
const mouseleave$ = fromEvent(this.clappingBtn.nativeElement, 'mouseleave');
const hold$ = mousedown$.pipe(
switchMap(() => interval(200).pipe(
takeUntil(
merge(mouseup$, mouseleave$)
)
))
);
hold$.subscribe(addClap);
}

25. OPTIMISTIC
UPDATES

27. state.ts

28. private profileStoreSubject =
new BehaviorSubject(this.initialState);
profileStore = this.profileStoreSubject.asObservable();

29. private errorSubject = new Subject<string>();
error = this.errorSubject.asObservable();

30. private setPrevState() {
this.prevState = this.profileStoreSubject.getValue();
}

31. dismissError() {
this.errorSubject.next(null);
}

32. setProfileStore(profile: Profile) {
this.setPrevState();
this.profileStoreSubject.next(profile);
this.dismissError();
}

33. profile.service.ts

34. Fetch API data in init method and setProfileStore

35. update method updates store via updateProfile

36. Handle HTTP errors with stateError

41. BehaviorSubject
BehaviorSubject<any>

42. + STRATEGY

43. THANK YOU
Demo: http://bit.ly/2YcOKrb
Slides: http://bit.ly/2OmEisq