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

by Wataru KASAHARA

Slide 1

Slide 1 text

とについて笠原渉

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

使い方使う際にへの登録はコンポーネントで行うコンポーネントのノードごとにのインスタンスがシングルトンになる ※ のインスタンスがコンポーネントのインスタンスごとにシングルトンになるのは依存性注入の方法によるもので調べてみよう

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

使い方は引数にまたはのパターンを取ることができるとしてを受け取ったとき内部でが呼び出され、状態が更新される

Slide 17

Slide 17 text

使い方の中身を見てみる

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

デモ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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