@potato4d と @spring_raining が、SPA の非同期処理における待受状態とリソースが空だった場合の処理の違いについて話しました。

• SPA の非同期処理の状態管理どうしてる？
  • 待受中
  • 取得成功してリソースが length >= 1 の場合の処理
  • 取得成功してリソースが length == 0 の場合の処理
  • 失敗したときの処理
  • の管理が辛い話
• よくある悩み
  • HTTP リクエスト用の状態がグローバル全体に影響する
    • それぞれのロード状態を組み合わせて表示が変わることがある
    • 利用するコンポーネントが持っておきたい状態に関するデータがグローバルステート + 組み合わせのマトリクスで辛い
      • 大量にグローバルに生える enum もつらい
  • スピナーが大量になる問題
    • とはいえコンポーネントに持たせるとその中での状態管理も大変
      • 手続き的に表示を切り替える方法
      • false/null/undefined と配列を組み合わせる方法
    • 実装も大変だしページ内がスピナーだらけになるのもつらい
• フレームワークでの解決方法
  • React ならグローバルステートが肥大化することを許容して Redux で倒すことが多め
  • Vue.js ならあまり TS フレンドリーである必要がないので object[] | boolean で倒すこともあったり、this.$loading() みたいにすることも
  • Angular が async pipe があって非同期を同期っぽく扱えるので一番楽かも？
• 最近のプロジェクトでの話
  • React + Apollo だと割と優秀
    • useQuery が loading / result / error を返すフックになっている
    • https://www.apollographql.com/docs/react/api/react-hooks/
  • Vue.js だとディレクティブで解決することも
    • Promise の解決までは render を改変してスピナーを出すなど
    • 失敗した結果はコンポーネント内で処理する
  • vue-promised も良さそう
    • Pending / Resolve / Reject で slot を出し分ける
    • https://github.com/posva/vue-promised
• React.Suspense どうっすか
  • React には Promise をうまく使える Suspense が導入されている
    • https://ja.reactjs.org/docs/react-api.html#reactsuspense
  • koba04 さんの記事が良さそう
    • https://logmi.jp/tech/articles/302611
  • 処理が終わってない場合に Promise object を throw することで複数の状態を持つレンダリングを実現

BGM & SE: 魔王魂