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
820
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.6k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.2k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.4k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
34
Other Decks in Programming
See All in Programming
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
120
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
840
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Featured
See All Featured
Optimizing for Happiness
mojombo
375
69k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
Embracing the Ebb and Flow
colly
83
4.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Web Components: a chance to create the future
zenorocha
309
42k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
The Cult of Friendly URLs
andyhume
76
6k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Testing 201, or: Great Expectations
jmmastey
36
7k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Designing with Data
zakiwarfel
98
5k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Transcript
と について 笠原 渉
笠原 渉 株式会社 フロントエンドエンジニア 日本ユーザー会
アジェンダ とは何なのか? どうやって使うのか? とは何なのか? どうやって使うのか?
とは でリアクティブアプリケーションを構築するための ライブラリ に がリリース で複数のパッケージを管理してる で な状態管理を実現するため のパッケージがメインだった 今年も新しいパッケージが追加されたのでそれらを
紹介
で追加 と異なりコンポーネントの状態管理に特化したライブラリ コンポーネントのライフサイクルに紐付けられていてコンポーネントが破棄されると 状態が される
のメリットとトレードオフ メリット はコンポーネントツリー内の特定のノードに紐付いているためそ のノードが破棄されると自動的にクリーンアップされる 状態は各 で完結しているため、同じコンポーネントでも独立した インスタンスを持つことが可能 トレードオフ と比較して コンポーネントとの結合度は高いのでスケーラビリティが低い
一部 は使えない
と どちらを使うか? どちらかが優れている、というものではない アプリケーションの性質に合う方を使う 場合によっては両方使うこともある 決定するための指標 アプリケーションの規模 状態の寿命 アプリケーション自体の寿命
使い方 簡単なカウンターアプリを想定
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義 型の を継承した を用意 で状態の初期化
使い方 状態は というセレクタを使うこ とで簡単に読み取りができる の引数に任意の を 指定することで状態を自由に し て返すことが可能
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる ※ のインスタンスがコン ポーネントのインスタンスごとにシングルト
ンになるのは依存性注入の方法によるも の で調べてみよう
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる 状態の読み取り方は他のサービス同 様
使い方 状態は以下のどちらかを使うことで更新ができる
使い方 は現在の状態を引数にとる を渡す
使い方 は引数に または の パターンを取ることができ る として を受け 取ったとき内部で が呼び出
され、状態が更新される
使い方 の中身を見てみる
で追加 なアプリケーションを実現するためのライブラリ 提供される機能は つ This package is still experimental and
may change during development.
の代替 でも でもどちらで も動作する
特徴 の代替 でも でもどちらでも動作する との比較 は重い動的なインタラクティブな だと の変更検知にパフォー マンス低下の懸念がある は
がなくても動くためこの問題が解決できる
使い方 のように書くだけで同じように使える で を無効にしても は変わらず動作する
な値を にバインドするためのディレクティブ を使わない右のように書 く な値をバインドする場合は が必要 しかし は な場合描画がされ ない
右の場合は 後に が 更新されるまで が描画されない
な値を にバインドするためのディレクティブ を使うと右のようになる は な場合でも描画され る 右の場合は 後に が 更新される前でも
は描画される
デモ
まとめ とは との違い 使い方 まだ な機能 と の つが提供されている のどちらでも動作する
参考リンク 公式ドキュメント サンプル