NgRxについて考えたこと

Transcript

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

2. @kou bitbank, inc

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

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

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

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を使うのか

7. なぜEffectsを使うのか? • Isolate side effects from components, allowing for more

   pure components that select state and dispatch actions. • コンポーネントからside effectsを分離して、selectとdispatchするだけのよりピュアなものに する. • → UIとビジネスロジックを切り離したい

8. Component facade Unknown get set ? ?

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

10. @Effect() breakpoint$ = this.breakpointObserver .observe([Breakpoints.HandsetLandscape]) .pipe( map((result) => { if

    (result.match) { return new Landscape(); } return new Portrait(); }) ); EffectsはActionを起点にしなくても独立して動作できる例

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

    Worker として考えられるのでは ?

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

    Actions$ Actions$ Effects$ get set

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

    (Store) に保存してUIに通知する。

14. さらに加えて • UI層と完全に分離されるので、 UIコンポーネント側の取替えが可能。 (Micro Front-endの Back-endとなれる) • Actionはシリアライズ可能であり、ネットワークを飛び超えて Actionをやり取りすることも可能。

    • Event Sourcingを実現しているので状態の追跡と復元が可能。 Decentralized Web時代のアプリ ケーションに適合出来るのでは。

15. Angular Worker facade Shared DataBase Event Source Actions$ Reducers State

    Actions$ Actions$ Effects$ get set React jQuery

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

17. おわりに 一言 • NgRxはただの状態管理のライブラリではなく、 ReactiveにEvent Sourcingを実現するため のライブラリ • Effectsは何でも出来るので、自由度が高い。 •

    自由度が高すぎるので、下手に使うとアプリケーションが崩壊する。 • また、小規模なアプリケーションの場合、普通に MVCで書くより冗長で複雑になるのは間違 いないのでなぜ必要なのかを真剣に考えてから使うべき。

18. Thank you !!