Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NgRx v8を使ってみよう

puku0x
September 11, 2019

NgRx v8を使ってみよう

puku0x

September 11, 2019
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. NgRx v8を使ってみよう
    Angularもくもく会 in Fukuoka #9

    View full-size slide

  2. Noriyuki
    Shinpuku
    ng-fukuoka organizer
    VEGA corporation Co., Ltd.
    @puku0x

    View full-size slide

  3. Full-fledged & opinionated
    Angular Protractor Forms PWA Augury
    Language
    Services
    Router Elements CDK
    Universal Karma Labs Compiler i18n Http Material Animations CLI

    View full-size slide

  4. State management?

    View full-size slide

  5. Basic state management
    ● BehaviorSubject
    ● ReplaySubject
    ○ No initial value
    ○ No current value getter

    View full-size slide

  6. 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);
    }
    }

    View full-size slide

  7. 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);
    }
    }

    View full-size slide

  8. Complex state management?

    View full-size slide

  9. NgRx
    ● RxJS powered Redux for Angular
    ● Type-safe and performant
    ● Community driven

    View full-size slide

  10. Does it have many boilerplates?

    View full-size slide

  11. NgRx v8 has less boilerplates!

    View full-size slide

  12. https://blog.angularindepth.com/ngrx-action-creators-redesigned-d396960e46da

    View full-size slide

  13. 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 }>()
    );

    View full-size slide

  14. 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)
    );

    View full-size slide

  15. 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 }
    );

    View full-size slide

  16. Creator factories make NgRx simple!

    View full-size slide

  17. Recap
    ● NgRx provides Redux for Angular
    ● Less boilerplate with creator factories
    ● Try it now!
    https://ngrx.io/
    https://stackblitz.com/edit/ngrx-todo-v8

    View full-size slide

  18. Thank you!
    @puku0x
    Noriyuki Shinpuku

    View full-size slide