TL;DR

• 誰か初期状態を持っているのかはっきりする
• 初期状態が定義されるタイミングを考慮する

SPAの鬼門は State 管理であるといって過言はない。

今回は初期状態について現在考えていることをメモする。

前提

• URLはRestとする
• ページ内から幾つかのAPIにアクセスする
• 内部は複数のURLからなるSPAで構成されている
• 自分が設けている前提
  • 同一URLを表示したときには同一のAPIリクエストが発行されるべきである
  • または期待される結果が同一である（後述）
• APIリクエストの組み立てに必要な状態
  • location.href
  • 初期状態

例

• https://www.airbnb.com/s/paris/all
  • parisの宿を探す、一覧が出て来る
  • ただ、このURLには 暗黙的に今日以降 という日付範囲が適応されている
• https://www.airbnb.com/s/paris/all?checkin=2017-10-26&checkout=2017-10-28
  • checkin, checkoutの範囲を指定する
  • カレンダーに適応した日付の範囲と、その範囲内で検索できた対象の宿が表示される

SPAと状態

airbnbのようなカレンダーのような絞込みを提供している機能のことを考える。

• SPAが初期状態を持つ場合
  • 初期状態はJavaScriptがダウンロードされた際に決まる（今回は遅延で初期状態を定義することを除く）
• URLとSPAの状態が乖離する場合を考える
  • カレンダーの操作をしているが確定処理を行っていない
  • 画面には途中経過が表示されている（SPAのstateは更新されている）
• 初期状態がURLにあるとする場合
  • SPAに流入しJavaScriptがダウンロードされたタイミングと同一とは限らない
  • 上記の場合、期待しない初期状態からクエリを発行するため期待と矛盾する

状態の整合性を取る

• 遷移をした場合に状態の整合性をとるactionを onUpdate に書く場合
  • locationを引数として状態更新のアクションがもう1回Fluxを回る
  • onUpdate で再度整合性チェック、必要があればデータ更新
• 不必要なURLとstateの整合性を取るための再帰
  • 不採用

考えた選択肢

1. 検索条件をサーバから受け取り、検索条件表示と結果の乖離をなくす
2. 初期状態の定義をURLから生成できるよう、参照する状態の初期化を遅延する

reduxの場合、後者の方法はわからなかった。

まとめ

日本語難しい。

Happy Hacking!