ng-sake#12でLTしたNgRxについての話です。
NgRx Effectsについて最近考えたこと
View Slide
@koubitbank, inc
最初にNgRxとは? Effectsとは? よくある例
https://medium.com/default-to-open/understanding-a-large-scale-angular-app-with-ngrx-80f9fc5660cc
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());}}
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を使うのか
なぜEffectsを使うのか?● Isolate side effects from components, allowing for more pure components that selectstate and dispatch actions.● コンポーネントからside effectsを分離して、selectとdispatchするだけのよりピュアなものにする.● → UIとビジネスロジックを切り離したい
Component facadeUnknowngetset ??
最近Effectsについて考えたこと● EffectsはUIとは切り離されたバックグラウンドで独立して動作する。● また、UIとは関係ない処理を全部流してしまうこともできる。● EffectsはActionを起点とせず、他のソースを起点にして処理を実行できる。 (後述)
@Effect()breakpoint$ = this.breakpointObserver.observe([Breakpoints.HandsetLandscape]).pipe(map((result) => {if (result.match) {return new Landscape();}return new Portrait();}));EffectsはActionを起点にしなくても独立して動作できる例
つまり、Effectsとは● ただのネットワーク系の非同期の Actionを解決することに留まらず、独立した 1機能として動かせる。● → Job / Worker として考えられるのでは ?
ComponentWorkerfacadeShared DataBaseEvent SourceActions$ReducersStateActions$Actions$Effects$getset
Effectsは単独で動作可能なWorker?● UIに対して独立して動作が可能。● Actionを共通プロトコルとして、他 Effectsとの連携も可能。● クライアントアプリケーション内のジョブサーバーのようなイメージ● 動作した結果はDB (Store) に保存してUIに通知する。
さらに加えて● UI層と完全に分離されるので、 UIコンポーネント側の取替えが可能。 (Micro Front-endのBack-endとなれる)● Actionはシリアライズ可能であり、ネットワークを飛び超えて Actionをやり取りすることも可能。● Event Sourcingを実現しているので状態の追跡と復元が可能。 Decentralized Web時代のアプリケーションに適合出来るのでは。
AngularWorkerfacadeShared DataBaseEvent SourceActions$ReducersStateActions$Actions$Effects$getsetReactjQuery
Client ClientEffects EffectsStoreComponentsStoreComponentsActionNetwork
おわりに一言● NgRxはただの状態管理のライブラリではなく、 ReactiveにEvent Sourcingを実現するためのライブラリ● Effectsは何でも出来るので、自由度が高い。● 自由度が高すぎるので、下手に使うとアプリケーションが崩壊する。● また、小規模なアプリケーションの場合、普通に MVCで書くより冗長で複雑になるのは間違いないのでなぜ必要なのかを真剣に考えてから使うべき。
Thank you !!