SPAとInitial State
Number of word 1235
TL;DR
- 誰か初期状態を持っているのかはっきりする
- 初期状態が定義されるタイミングを考慮する
SPAの鬼門は State
管理であるといって過言はない。
今回は初期状態について現在考えていることをメモする。
前提
- URLはRestとする
- ページ内から幾つかのAPIにアクセスする
- 内部は複数のURLからなるSPAで構成されている
- 自分が設けている前提
- 同一URLを表示したときには同一のAPIリクエストが発行されるべきである
- または期待される結果が同一である(後述)
- APIリクエストの組み立てに必要な状態
location.href
- 初期状態
例
- https://www.airbnb.com/
- parisの宿を探す、一覧が出て来る
- ただ、このURLには 暗黙的に今日以降 という日付範囲が適応されている
- https://www.airbnb.com/
- checkin, checkoutの範囲を指定する
- カレンダーに適応した日付の範囲と、その範囲内で検索できた対象の宿が表示される
SPA と状態
airbnbのようなカレンダーのような絞込みを提供している機能のことを考える。
- SPAが初期状態を持つ場合
- 初期状態はJavaScript がダウンロードされた際に決まる(今回は遅延で初期状態を定義することを除く)
- URLとSPAの状態が乖離する場合を考える
- カレンダーの操作をしているが確定処理を行っていない
- 画面には途中経過が表示されている(SPAのstateは更新されている)
- 初期状態がURLにあるとする場合
- SPAに流入しJavaScriptがダウンロードされたタイミングと同一とは限らない
- 上記の場合、期待しない初期状態からクエリを発行するため期待と矛盾する
状態の整合性を取る
- 遷移をした場合に状態の整合性をとるactionを
onUpdate
に書く場合- locationを引数として状態更新のアクションがもう1回Fluxを回る
onUpdate
で再度整合性チェック、必要があればデータ更新
- 不必要なURLとstateの整合性を取るための再帰
- 不採用
考えた選択肢
- 検索条件をサーバから受け取り、検索条件表示と結果の乖離をなくす
- 初期状態の定義をURLから生成できるよう、参照する状態の初期化を遅延する
reduxの場合、後者の方法はわからなかった。
まとめ
日本語難しい。
Happy Hacking!