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
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
300
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
2.9k
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
480
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
170
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
110
A2Aのクライアントを自作する
rynsuke
1
160
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.3k
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
290
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
400
AIのAIによるAIのための出力評価と改善
chocoyama
1
520
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
14
2.3k
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
160
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A designer walks into a library…
pauljervisheath
206
24k
Thoughts on Productivity
jonyablonski
69
4.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Cult of Friendly URLs
andyhume
79
6.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
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 !!