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!