フロントエンドにおける6つの状態
● Server state
● Persistent state
● URL and router state
● Client state
● Transient client state
● Local UI state
○ SS, PS, URLS, CS, TCS, UISと略すかも
Slide 6
Slide 6 text
Server state, Persistent state
● Server state
○ サーバーが保存しているデータ
○ REST APIなどでフロントエンドに送信される
● Persistent state
○ フロントエンドで保存している Server state
○ Server stateのキャッシュと見なすこともできる
○ 楽観的更新のために PSだけ更新するケースもある
Slide 7
Slide 7 text
URL and router state, Client state
● URL and router state
○ 現在のURL
● Client state
○ クライアント側の状態のうち、サーバーに保存されないもの
○ 例: Todoリストから完了したものだけ表示するフィルター
○ (URLと同期すべき状態)
● URLSとCSは同期すべき
Slide 8
Slide 8 text
Transient client state, Local UI State
● クライアント側でURLに同期されない状態
○ 例: Youtubeで動画の再生中にブラウザを閉じて、次開くとその再生時間から開く
○ localStorageとかCookieとかのServiceに状態管理を任せる
● UIに閉じた状態
○ ツールチップが表示されている /表示されていないなど
Slide 9
Slide 9 text
Server state, Persistent stateの実装
● 一つのXHRを行うサービスに閉じて実装する
○ XHRを実行するメソッドと、最新の値を保持しておく Subject
○ XHRの実行時に副作用として Subjectを更新する
HttpService
Server state
Persistent state
Transient client state, Local UI Stateの実装
● Transient client stete
○ localStorageとかCookieとかのServiceに状態管理を任せる
● Local UI State
○ Componentの変数に状態を持つ
Component
LocalStorageService
Slide 13
Slide 13 text
HttpService
Server state
Persistent state
Component
this.router.navigatetoUrl('/todos?status=done’);
Router
フィルターをユーザーが操作
html
LocalStorageService
StoreService
Local UI state
URL and router state
Client state
Transient client state
Local UI state
Container/Smart Component
HttpやRouterのObservableをこ
ねこねして現在の状態を計算す
る
Component
✝最強のアーキテクチャ✝
全体図
何かいい名前が欲しい
Store...?
線が太い赤枠:状態のデータ
を持っているところ