Slide 1
Slide 1 text
NgRx v8を使ってみよう
Angularもくもく会 in Fukuoka #9
Slide 2
Slide 2 text
Noriyuki
Shinpuku
ng-fukuoka organizer
VEGA corporation Co., Ltd.
@puku0x
Slide 3
Slide 3 text
Angular
Slide 4
Slide 4 text
Full-fledged & opinionated
Angular Protractor Forms PWA Augury
Language
Services
Router Elements CDK
Universal Karma Labs Compiler i18n Http Material Animations CLI
Slide 5
Slide 5 text
State management?
Slide 6
Slide 6 text
RxJS
Slide 7
Slide 7 text
Basic state management
● BehaviorSubject
● ReplaySubject
○ No initial value
○ No current value getter
Slide 8
Slide 8 text
BehaviorSubject
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class CouterService {
private counter = new BehaviorSubject(0); // Initial value = 0
get counter$() {
return this.counter.asObservable();
}
increment() {
const value = this.counter.getValue();
this.counter.next(value + 1);
}
}
Slide 9
Slide 9 text
ReplaySubject
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class CouterService {
private counter = new ReplaySubject(1); // Buffer size = 1
get counter$() {
return this.counter.asObservable();
}
setCounter(value: number) {
this.counter.next(value);
}
}
Slide 10
Slide 10 text
Complex state management?
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
NgRx
● RxJS powered Redux for Angular
● Type-safe and performant
● Community driven
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Does it have many boilerplates?
Slide 15
Slide 15 text
NgRx v8 has less boilerplates!
Slide 16
Slide 16 text
https://blog.angularindepth.com/ngrx-action-creators-redesigned-d396960e46da
Slide 17
Slide 17 text
Action creator factory
import { createAction, props } from '@ngrx/store';
export const increment = createAction(
'[Counter] Increment'
);
export const setValue = createAction(
'[Counter] Set value,
props<{ value: number }>()
);
Slide 18
Slide 18 text
Reducer creator factory
import { createReducer, on } from '@ngrx/store';
import { increment, setValue } from './counter.actions';
export const initialState = 0;
const counterReducer = createReducer(initialState,
on(increment, state => state + 1), // No more switch-case!
on(setValue, (state, { value }) => value)
);
Slide 19
Slide 19 text
Effect creator factory
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { tap } from 'rxjs/operators';
import { setValue } from '../actions';
@Injectable()
export class CounterEffects {
constructor(private actions$: Actionn) {}
setValue$ = createEffect(() => // No more @Effect decorator!
this.actions$.pipe(
ofType(setValue),
tap(({ value }) => console.log(`${value}`))
), { dispatch: false }
);
Slide 20
Slide 20 text
Creator factories make NgRx simple!
Slide 21
Slide 21 text
Recap
● NgRx provides Redux for Angular
● Less boilerplate with creator factories
● Try it now!
https://ngrx.io/
https://stackblitz.com/edit/ngrx-todo-v8
Slide 22
Slide 22 text
Thank you!
@puku0x
Noriyuki Shinpuku