NgRx component と component-store について / mini-ng-japan-2020

Transcript

1. と について 笠原 渉

2. 笠原 渉 株式会社 フロントエンドエンジニア 日本ユーザー会

3. アジェンダ とは何なのか？ どうやって使うのか？ とは何なのか？ どうやって使うのか？

4. とは でリアクティブアプリケーションを構築するための ライブラリ に がリリース で複数のパッケージを管理してる で な状態管理を実現するため のパッケージがメインだった 今年も新しいパッケージが追加されたのでそれらを

   紹介

5. で追加 と異なりコンポーネントの状態管理に特化したライブラリ コンポーネントのライフサイクルに紐付けられていてコンポーネントが破棄されると 状態が される

6. のメリットとトレードオフ メリット はコンポーネントツリー内の特定のノードに紐付いているためそ のノードが破棄されると自動的にクリーンアップされる 状態は各 で完結しているため、同じコンポーネントでも独立した インスタンスを持つことが可能 トレードオフ と比較して コンポーネントとの結合度は高いのでスケーラビリティが低い

   一部 は使えない

7. と どちらを使うか？ どちらかが優れている、というものではない アプリケーションの性質に合う方を使う 場合によっては両方使うこともある 決定するための指標 アプリケーションの規模 状態の寿命 アプリケーション自体の寿命

8. 使い方 簡単なカウンターアプリを想定

9. 使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義

10. 使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義 型の を継承した を用意 で状態の初期化

11. 使い方 状態は というセレクタを使うこ とで簡単に読み取りができる の引数に任意の を 指定することで状態を自由に し て返すことが可能

12. 使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる ※ のインスタンスがコン ポーネントのインスタンスごとにシングルト

    ンになるのは依存性注入の方法によるも の で調べてみよう

13. 使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる 状態の読み取り方は他のサービス同 様

14. 使い方 状態は以下のどちらかを使うことで更新ができる

15. 使い方 は現在の状態を引数にとる を渡す

16. 使い方 は引数に または の パターンを取ることができ る として を受け 取ったとき内部で が呼び出

    され、状態が更新される

17. 使い方 の中身を見てみる

18. で追加 なアプリケーションを実現するためのライブラリ 提供される機能は つ This package is still experimental and

    may change during development.

19. の代替 でも でもどちらで も動作する

20. 特徴 の代替 でも でもどちらでも動作する との比較 は重い動的なインタラクティブな だと の変更検知にパフォー マンス低下の懸念がある は

    がなくても動くためこの問題が解決できる

21. 使い方 のように書くだけで同じように使える で を無効にしても は変わらず動作する

22. な値を にバインドするためのディレクティブ を使わない右のように書 く な値をバインドする場合は が必要 しかし は な場合描画がされ ない

    右の場合は 後に が 更新されるまで が描画されない

23. な値を にバインドするためのディレクティブ を使うと右のようになる は な場合でも描画され る 右の場合は 後に が 更新される前でも

    は描画される

24. デモ

25. まとめ とは との違い 使い方 まだ な機能 と の つが提供されている のどちらでも動作する

26. 参考リンク 公式ドキュメント サンプル