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
220
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
450
きれいなCSSを書くためのTools
koumatsumot0
0
390
AngularアプリケーションにおけるCSS設計手法
koumatsumot0
8
5.6k
Other Decks in Technology
See All in Technology
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
130
20241218_マルチアカウント環境におけるIAM_Access_Analyzerによる権限管理.pdf
nrinetcom
PRO
3
150
TypeScript開発にモジュラーモノリスを持ち込む
sansantech
PRO
3
870
普通のエンジニアがLaravelコアチームメンバーになるまで
avosalmon
0
670
テストを書かないためのテスト/ Tests for not writing tests
sinsoku
1
150
Unsafe.BitCast のすゝめ。
nenonaninu
0
150
非機能品質を作り込むための実践アーキテクチャ
knih
6
1.8k
OPENLOGI Company Profile
hr01
0
57k
Storage Browser for Amazon S3を触ってみた + α
miura55
0
100
Storage Browser for Amazon S3
miu_crescent
1
350
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.6k
AWSの生成AIサービス Amazon Bedrock入門!(2025年1月版)
minorun365
PRO
7
360
Featured
See All Featured
Code Review Best Practice
trishagee
65
17k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Speed Design
sergeychernyshev
25
720
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Building Adaptive Systems
keathley
38
2.3k
Optimising Largest Contentful Paint
csswizardry
33
3k
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 !!