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 component と component-store について / mini-ng-japan-2020
Search
Wataru KASAHARA
October 17, 2020
Programming
0
760
NgRx component と component-store について / mini-ng-japan-2020
Wataru KASAHARA
October 17, 2020
Tweet
Share
More Decks by Wataru KASAHARA
See All by Wataru KASAHARA
Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4
kasaharu
3
1.5k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.1k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
1.9k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.3k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
34
Other Decks in Programming
See All in Programming
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
950
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
280
Elm Form Validation
bkuhlmann
0
510
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
VS Code をプロダクトにどう取り込むか
onomax
1
370
2 週間で Twitter Bot を作ってみた
contour_gara
0
510
Ruby Function Composition
bkuhlmann
1
330
雑に思考を整理する技術と効能
konifar
60
29k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1025
450k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
How to Ace a Technical Interview
jacobian
272
22k
Code Reviewing Like a Champion
maltzj
514
39k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
A better future with KSS
kneath
231
16k
Ruby is Unlike a Banana
tanoku
96
10k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
What the flash - Photography Introduction
edds
64
11k
Transcript
と について 笠原 渉
笠原 渉 株式会社 フロントエンドエンジニア 日本ユーザー会
アジェンダ とは何なのか? どうやって使うのか? とは何なのか? どうやって使うのか?
とは でリアクティブアプリケーションを構築するための ライブラリ に がリリース で複数のパッケージを管理してる で な状態管理を実現するため のパッケージがメインだった 今年も新しいパッケージが追加されたのでそれらを
紹介
で追加 と異なりコンポーネントの状態管理に特化したライブラリ コンポーネントのライフサイクルに紐付けられていてコンポーネントが破棄されると 状態が される
のメリットとトレードオフ メリット はコンポーネントツリー内の特定のノードに紐付いているためそ のノードが破棄されると自動的にクリーンアップされる 状態は各 で完結しているため、同じコンポーネントでも独立した インスタンスを持つことが可能 トレードオフ と比較して コンポーネントとの結合度は高いのでスケーラビリティが低い
一部 は使えない
と どちらを使うか? どちらかが優れている、というものではない アプリケーションの性質に合う方を使う 場合によっては両方使うこともある 決定するための指標 アプリケーションの規模 状態の寿命 アプリケーション自体の寿命
使い方 簡単なカウンターアプリを想定
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義 型の を継承した を用意 で状態の初期化
使い方 状態は というセレクタを使うこ とで簡単に読み取りができる の引数に任意の を 指定することで状態を自由に し て返すことが可能
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる ※ のインスタンスがコン ポーネントのインスタンスごとにシングルト
ンになるのは依存性注入の方法によるも の で調べてみよう
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる 状態の読み取り方は他のサービス同 様
使い方 状態は以下のどちらかを使うことで更新ができる
使い方 は現在の状態を引数にとる を渡す
使い方 は引数に または の パターンを取ることができ る として を受け 取ったとき内部で が呼び出
され、状態が更新される
使い方 の中身を見てみる
で追加 なアプリケーションを実現するためのライブラリ 提供される機能は つ This package is still experimental and
may change during development.
の代替 でも でもどちらで も動作する
特徴 の代替 でも でもどちらでも動作する との比較 は重い動的なインタラクティブな だと の変更検知にパフォー マンス低下の懸念がある は
がなくても動くためこの問題が解決できる
使い方 のように書くだけで同じように使える で を無効にしても は変わらず動作する
な値を にバインドするためのディレクティブ を使わない右のように書 く な値をバインドする場合は が必要 しかし は な場合描画がされ ない
右の場合は 後に が 更新されるまで が描画されない
な値を にバインドするためのディレクティブ を使うと右のようになる は な場合でも描画され る 右の場合は 後に が 更新される前でも
は描画される
デモ
まとめ とは との違い 使い方 まだ な機能 と の つが提供されている のどちらでも動作する
参考リンク 公式ドキュメント サンプル