フロントエンドにおける6つの状態 ● Server state ● Persistent state ● URL and router state ● Client state ● Transient client state ● Local UI state ○ SS, PS, URLS, CS, TCS, UISと略すかも
Server state, Persistent state ● Server state ○ サーバーが保存しているデータ ○ REST APIなどでフロントエンドに送信される ● Persistent state ○ フロントエンドで保存している Server state ○ Server stateのキャッシュと見なすこともできる ○ 楽観的更新のために PSだけ更新するケースもある
URL and router state, Client state ● URL and router state ○ 現在のURL ● Client state ○ クライアント側の状態のうち、サーバーに保存されないもの ○ 例: Todoリストから完了したものだけ表示するフィルター ○ (URLと同期すべき状態) ● URLSとCSは同期すべき
Server state, Persistent stateの実装 ● 一つのXHRを行うサービスに閉じて実装する ○ XHRを実行するメソッドと、最新の値を保持しておく Subject ○ XHRの実行時に副作用として Subjectを更新する HttpService Server state Persistent state
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...? 線が太い赤枠:状態のデータ を持っているところ