Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NgRxについて考えたこと
Search
kou
August 06, 2018
Technology
0
230
NgRxについて考えたこと
ng-sake#12でLTしたNgRxについての話です。
kou
August 06, 2018
Tweet
Share
More Decks by kou
See All by kou
Angular Webアプリケーションの最新設計手法.pdf
koumatsumot0
7
11k
NgRx v7
koumatsumot0
1
470
きれいなCSSを書くためのTools
koumatsumot0
0
420
AngularアプリケーションにおけるCSS設計手法
koumatsumot0
8
5.8k
Other Decks in Technology
See All in Technology
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
130
【基調講演】Crossroad~IoT×AIが交差する未来~【SORACOM Discovery 2025】
soracom
PRO
0
110
TROCCO今昔
gtnao
0
200
室長の逆襲 :データ活用の陣地を増やすためのヒント
masatoshi0205
0
170
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
200
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
850
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
250
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
8
2.4k
Building GoReleaser - from shell script to paid product
caarlos0
0
210
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
5
1.2k
今日からあなたもGeminiを好きになる
subaruhello
1
480
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Docker and Python
trallard
45
3.5k
The Language of Interfaces
destraynor
158
25k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Documentation Writing (for coders)
carmenintech
72
4.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing Experiences People Love
moore
142
24k
Gamification - CAS2011
davidbonilla
81
5.4k
Transcript
NgRx Effectsについて最近考えたこと
@kou bitbank, 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 select state and dispatch actions. • コンポーネントからside effectsを分離して、selectとdispatchするだけのよりピュアなものに する. • → UIとビジネスロジックを切り離したい
Component facade Unknown get set ? ?
最近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 として考えられるのでは ?
Component Worker facade Shared DataBase Event Source Actions$ Reducers State
Actions$ Actions$ Effects$ get set
Effectsは単独で動作可能なWorker? • UIに対して独立して動作が可能。 • Actionを共通プロトコルとして、他 Effectsとの連携も可能。 • クライアントアプリケーション内のジョブサーバーのようなイメージ • 動作した結果はDB
(Store) に保存してUIに通知する。
さらに加えて • UI層と完全に分離されるので、 UIコンポーネント側の取替えが可能。 (Micro Front-endの Back-endとなれる) • Actionはシリアライズ可能であり、ネットワークを飛び超えて Actionをやり取りすることも可能。
• Event Sourcingを実現しているので状態の追跡と復元が可能。 Decentralized Web時代のアプリ ケーションに適合出来るのでは。
Angular Worker facade Shared DataBase Event Source Actions$ Reducers State
Actions$ Actions$ Effects$ get set React jQuery
Client Client Effects Effects Store Components Store Components Action Network
おわりに 一言 • NgRxはただの状態管理のライブラリではなく、 ReactiveにEvent Sourcingを実現するため のライブラリ • Effectsは何でも出来るので、自由度が高い。 •
自由度が高すぎるので、下手に使うとアプリケーションが崩壊する。 • また、小規模なアプリケーションの場合、普通に MVCで書くより冗長で複雑になるのは間違 いないのでなぜ必要なのかを真剣に考えてから使うべき。
Thank you !!