:-) 🏕

SPAとInitial State

October 18, 2017

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!

image


Written by Keisuke Kan who lives and works in Japan building useful things. You should follow him on Twitter