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
240
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
AI関数が早くなったので試してみよう
kumakura
0
110
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
0
280
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
2
320
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.4k
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
250
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
170
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
840
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
320
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Making Projects Easy
brettharned
117
6.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Scaling GitHub
holman
461
140k
A designer walks into a library…
pauljervisheath
207
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
What's in a price? How to price your products and services
michaelherold
246
12k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
BBQ
matthewcrist
89
9.8k
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 !!