NgRxについて考えたこと

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

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