$30 off During Our Annual Pro Sale. View Details »

NgRxについて考えたこと

kou
August 06, 2018

 NgRxについて考えたこと

ng-sake#12でLTしたNgRxについての話です。

kou

August 06, 2018
Tweet

More Decks by kou

Other Decks in Technology

Transcript

  1. NgRx Effectsについて最近考えたこと

    View Slide

  2. @kou
    bitbank, inc

    View Slide

  3. 最初に
    NgRxとは? Effectsとは? よくある例

    View Slide

  4. https://medium.com/default-to-open/understanding-a-large-scale-angular-app-with-ngrx-80f9fc5660cc

    View Slide

  5. book.effects.ts
    @Injectable()
    export class BookEffects {
    @Effect()
    search$ = this.actions$.pipe(
    ofType(BookActionTypes.Search),
    mergeMap(() => this.api.searchBooks()),
    map((books) => new SearchComplete(books)),
    catchError(err => of(new SearchError(err)))
    );
    }
    book.component.ts
    @Component()
    export class BookSearchComponent {
    ngOnInit() {
    book$ = this.store(pipe(select('book')))
    }
    submit() {
    this.store.dispatch(new Search());
    }
    }

    View Slide

  6. book.component.ts
    @Component()
    export class BookSearchComponent {
    submit() {
    this.store.dispatch(new Search());
    this.api.searchBooks()
    .pipe(
    map((books) => new SearchComplete(books)),
    catchError(err => of(new SearchError(err))),
    )
    .subscribe((action) => this.store.dispatch(action));
    }
    }
    Effectsを使うと冗長になる。なぜ Component内で書かずEffectsを使うのか

    View Slide

  7. なぜEffectsを使うのか?
    ● Isolate side effects from components, allowing for more pure components that select
    state and dispatch actions.
    ● コンポーネントからside effectsを分離して、selectとdispatchするだけのよりピュアなものに
    する.
    ● → UIとビジネスロジックを切り離したい

    View Slide

  8. Component facade
    Unknown
    get
    set ?
    ?

    View Slide

  9. 最近Effectsについて考えたこと
    ● EffectsはUIとは切り離されたバックグラウンドで独立して動作する。
    ● また、UIとは関係ない処理を全部流してしまうこともできる。
    ● EffectsはActionを起点とせず、他のソースを起点にして処理を実行できる。 (後述)

    View Slide

  10. @Effect()
    breakpoint$ = this.breakpointObserver
    .observe([Breakpoints.HandsetLandscape])
    .pipe(
    map((result) => {
    if (result.match) {
    return new Landscape();
    }
    return new Portrait();
    })
    );
    EffectsはActionを起点にしなくても独立して動作できる例

    View Slide

  11. つまり、Effectsとは
    ● ただのネットワーク系の非同期の Actionを解決することに留まらず、独立した 1機能として動
    かせる。
    ● → Job / Worker として考えられるのでは ?

    View Slide

  12. Component
    Worker
    facade
    Shared DataBase
    Event Source
    Actions$
    Reducers
    State
    Actions$
    Actions$
    Effects$
    get
    set

    View Slide

  13. Effectsは単独で動作可能なWorker?
    ● UIに対して独立して動作が可能。
    ● Actionを共通プロトコルとして、他 Effectsとの連携も可能。
    ● クライアントアプリケーション内のジョブサーバーのようなイメージ
    ● 動作した結果はDB (Store) に保存してUIに通知する。

    View Slide

  14. さらに加えて
    ● UI層と完全に分離されるので、 UIコンポーネント側の取替えが可能。 (Micro Front-endの
    Back-endとなれる)
    ● Actionはシリアライズ可能であり、ネットワークを飛び超えて Actionをやり取りすることも可能。
    ● Event Sourcingを実現しているので状態の追跡と復元が可能。 Decentralized Web時代のアプリ
    ケーションに適合出来るのでは。

    View Slide

  15. Angular
    Worker
    facade
    Shared DataBase
    Event Source
    Actions$
    Reducers
    State
    Actions$
    Actions$
    Effects$
    get
    set
    React
    jQuery

    View Slide

  16. Client Client
    Effects Effects
    Store
    Components
    Store
    Components
    Action
    Network

    View Slide

  17. おわりに
    一言
    ● NgRxはただの状態管理のライブラリではなく、 ReactiveにEvent Sourcingを実現するため
    のライブラリ
    ● Effectsは何でも出来るので、自由度が高い。
    ● 自由度が高すぎるので、下手に使うとアプリケーションが崩壊する。
    ● また、小規模なアプリケーションの場合、普通に MVCで書くより冗長で複雑になるのは間違
    いないのでなぜ必要なのかを真剣に考えてから使うべき。

    View Slide

  18. Thank you !!

    View Slide