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
410
AngularアプリケーションにおけるCSS設計手法
koumatsumot0
8
5.8k
Other Decks in Technology
See All in Technology
Roo CodeとClaude Code比較してみた
pharma_x_tech
1
160
現場で役立つAPIデザイン
nagix
1
190
Google I/O 2025 Keynote & Developer Keynote Overview
yanzm
0
100
Tenstorrent 開発者プログラム
tenstorrent_japan
0
200
FASTと向き合うことで見えた、大規模アジャイルの難しさと楽しさ
wooootack
0
250
Nonaka Sensei
kawaguti
PRO
0
270
大失敗しないための Web API 開発レシピ / A recipe for not making a big failure on WebAPI development
yokawasa
1
190
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
2k
libsyncrpcってなに?
uhyo
0
250
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
2
500
プロジェクトマネージャーに最後まで残るたった一つの仕事は交渉
ichimichi
1
180
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
360
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Cult of Friendly URLs
andyhume
78
6.4k
KATA
mclloyd
29
14k
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 !!