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...
Search
Wataru KASAHARA
October 17, 2020
Programming
0
870
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.7k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.3k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2.1k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.5k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
39
Other Decks in Programming
See All in Programming
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
140
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
CQRS+ES勉強会#1
rechellatek
0
400
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
240
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
820
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
530
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
370
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.2k
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.5k
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Writing Fast Ruby
sferik
628
61k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
A Tale of Four Properties
chriscoyier
158
23k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Faster Mobile Websites
deanohume
306
31k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Transcript
と について 笠原 渉
笠原 渉 株式会社 フロントエンドエンジニア 日本ユーザー会
アジェンダ とは何なのか? どうやって使うのか? とは何なのか? どうやって使うのか?
とは でリアクティブアプリケーションを構築するための ライブラリ に がリリース で複数のパッケージを管理してる で な状態管理を実現するため のパッケージがメインだった 今年も新しいパッケージが追加されたのでそれらを
紹介
で追加 と異なりコンポーネントの状態管理に特化したライブラリ コンポーネントのライフサイクルに紐付けられていてコンポーネントが破棄されると 状態が される
のメリットとトレードオフ メリット はコンポーネントツリー内の特定のノードに紐付いているためそ のノードが破棄されると自動的にクリーンアップされる 状態は各 で完結しているため、同じコンポーネントでも独立した インスタンスを持つことが可能 トレードオフ と比較して コンポーネントとの結合度は高いのでスケーラビリティが低い
一部 は使えない
と どちらを使うか? どちらかが優れている、というものではない アプリケーションの性質に合う方を使う 場合によっては両方使うこともある 決定するための指標 アプリケーションの規模 状態の寿命 アプリケーション自体の寿命
使い方 簡単なカウンターアプリを想定
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義 型の を継承した を用意 で状態の初期化
使い方 状態は というセレクタを使うこ とで簡単に読み取りができる の引数に任意の を 指定することで状態を自由に し て返すことが可能
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる ※ のインスタンスがコン ポーネントのインスタンスごとにシングルト
ンになるのは依存性注入の方法によるも の で調べてみよう
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる 状態の読み取り方は他のサービス同 様
使い方 状態は以下のどちらかを使うことで更新ができる
使い方 は現在の状態を引数にとる を渡す
使い方 は引数に または の パターンを取ることができ る として を受け 取ったとき内部で が呼び出
され、状態が更新される
使い方 の中身を見てみる
で追加 なアプリケーションを実現するためのライブラリ 提供される機能は つ This package is still experimental and
may change during development.
の代替 でも でもどちらで も動作する
特徴 の代替 でも でもどちらでも動作する との比較 は重い動的なインタラクティブな だと の変更検知にパフォー マンス低下の懸念がある は
がなくても動くためこの問題が解決できる
使い方 のように書くだけで同じように使える で を無効にしても は変わらず動作する
な値を にバインドするためのディレクティブ を使わない右のように書 く な値をバインドする場合は が必要 しかし は な場合描画がされ ない
右の場合は 後に が 更新されるまで が描画されない
な値を にバインドするためのディレクティブ を使うと右のようになる は な場合でも描画され る 右の場合は 後に が 更新される前でも
は描画される
デモ
まとめ とは との違い 使い方 まだ な機能 と の つが提供されている のどちらでも動作する
参考リンク 公式ドキュメント サンプル