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
830
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.2k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.4k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
35
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
600
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
C++でシェーダを書く
fadis
6
4.1k
Better Code Design in PHP
afilina
PRO
0
120
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
最新TCAキャッチアップ
0si43
0
140
CSC509 Lecture 11
javiergs
PRO
0
180
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
290
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
RailsConf 2023
tenderlove
29
900
Designing the Hi-DPI Web
ddemaree
280
34k
Unsuck your backbone
ammeep
668
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Music & Morning Musume
bryan
46
6.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Fireside Chat
paigeccino
34
3k
Code Reviewing Like a Champion
maltzj
520
39k
Transcript
と について 笠原 渉
笠原 渉 株式会社 フロントエンドエンジニア 日本ユーザー会
アジェンダ とは何なのか? どうやって使うのか? とは何なのか? どうやって使うのか?
とは でリアクティブアプリケーションを構築するための ライブラリ に がリリース で複数のパッケージを管理してる で な状態管理を実現するため のパッケージがメインだった 今年も新しいパッケージが追加されたのでそれらを
紹介
で追加 と異なりコンポーネントの状態管理に特化したライブラリ コンポーネントのライフサイクルに紐付けられていてコンポーネントが破棄されると 状態が される
のメリットとトレードオフ メリット はコンポーネントツリー内の特定のノードに紐付いているためそ のノードが破棄されると自動的にクリーンアップされる 状態は各 で完結しているため、同じコンポーネントでも独立した インスタンスを持つことが可能 トレードオフ と比較して コンポーネントとの結合度は高いのでスケーラビリティが低い
一部 は使えない
と どちらを使うか? どちらかが優れている、というものではない アプリケーションの性質に合う方を使う 場合によっては両方使うこともある 決定するための指標 アプリケーションの規模 状態の寿命 アプリケーション自体の寿命
使い方 簡単なカウンターアプリを想定
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義 型の を継承した を用意 で状態の初期化
使い方 状態は というセレクタを使うこ とで簡単に読み取りができる の引数に任意の を 指定することで状態を自由に し て返すことが可能
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる ※ のインスタンスがコン ポーネントのインスタンスごとにシングルト
ンになるのは依存性注入の方法によるも の で調べてみよう
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる 状態の読み取り方は他のサービス同 様
使い方 状態は以下のどちらかを使うことで更新ができる
使い方 は現在の状態を引数にとる を渡す
使い方 は引数に または の パターンを取ることができ る として を受け 取ったとき内部で が呼び出
され、状態が更新される
使い方 の中身を見てみる
で追加 なアプリケーションを実現するためのライブラリ 提供される機能は つ This package is still experimental and
may change during development.
の代替 でも でもどちらで も動作する
特徴 の代替 でも でもどちらでも動作する との比較 は重い動的なインタラクティブな だと の変更検知にパフォー マンス低下の懸念がある は
がなくても動くためこの問題が解決できる
使い方 のように書くだけで同じように使える で を無効にしても は変わらず動作する
な値を にバインドするためのディレクティブ を使わない右のように書 く な値をバインドする場合は が必要 しかし は な場合描画がされ ない
右の場合は 後に が 更新されるまで が描画されない
な値を にバインドするためのディレクティブ を使うと右のようになる は な場合でも描画され る 右の場合は 後に が 更新される前でも
は描画される
デモ
まとめ とは との違い 使い方 まだ な機能 と の つが提供されている のどちらでも動作する
参考リンク 公式ドキュメント サンプル