🦋

状態遷移の管理方法を考える

2023/09/05に公開

JavaScript

frontend

xstate

tech

GUI開発と状態管理の現状について考えてみる

まずはGUI開発においてなぜ状態管理が必要であるかを考え、現状の開発環境でのベストプラクティスを確認します。

GUI開発について

GUIは動画や画像とは違って操作によってデータを変更し即座に画面に反映することができます。旧来のGUI開発では操作ののち、データを変更して画面にどのように反映するかまでロジックを書いていました。WebブラウザのDOM操作APIを使用して開発するとそうなります。しかし、最近のGUI開発においては変更したデータをどのように画面に反映させるかはライブラリの責務となりました。宣言的UIと呼ばれています。開発者はデータの変更のみに注力できるようになりました。

宣言的UIは現代のGUIにおいてデファクトスタンダードになっていて、Flutter、SwiftUI、Jetpack Compose、React など多くの宣言的UIライブラリが実用されています。データの反映について責務を負い、f(State) = UI の関数モデルで扱い、状態の更新の度に再計算・描画を行います。そして、データを更新するためのイベントハンドラが関数の副作用として記述されます。

状態管理の現状について

宣言的UIライブラリを用いた開発において、状態の更新の過程、つまり状態の遷移方法については開発者に任せられています。

宣言的UIライブラリの守備範囲

ON/OFFスイッチが個別にあり、それぞれのBooleanを上書くだけなら簡単ですが、トグルスイッチのように直前の状態を参考に次の状態が決まることは多くあります。さらに現実はもっと複雑で、ログインしているか、送信済みではないか、非同期で進行していた通信は完了しているか、いわゆる複雑なアプリというものはおおよそこの参考にすべき状態の数が多くなります。

ここに管理の仕組みが必要になっていると考えています。

既存の状態管理ライブラリについて

JavaScriptで書かれた著名なライブラリの、Reduxを確認してみます。

Reduxのコンセプト

This is the basic idea behind Redux: a single centralized place to contain the global state in your application, and specific patterns to follow when updating that state to make the code predictable.

状態遷移処理中に任意の直前の状態を参照可能にします。
f(State, Action) = State の関数モデルを適用し、テスタブルかつリーダブルな実装になります。

Redux concepts
https://redux.js.org/tutorials/essentials/part-1-overview-concepts

複雑な状態管理のベストプラクティス

Best Practice の一つとして Treat Reducers as State Machines (STRONGLY RECOMMENDED) が書かれています。

Now, since you're defining behavior per state instead of per action, you also prevent impossible transitions.

アプリの状態を直接利用するのではなく、状態としての値を定義し、ステートマシンとして記述することで制御する方法が提案されています。

ステートマシンの実装

const IDLE_STATUS = 'idle';
const LOADING_STATUS = 'loading';
const SUCCESS_STATUS = 'success';
const FAILURE_STATUS = 'failure';

const fetchIdleUserReducer = (state, action) => {
  // state.status is "idle"
  switch (action.type) {
    case FETCH_USER:
      return {
        ...state,
        status: LOADING_STATUS
      }
    }
    default:
      return state;
  }
}

// ... other reducers

const fetchUserReducer = (state, action) => {
  switch (state.status) {
    case IDLE_STATUS:
      return fetchIdleUserReducer(state, action);
    case LOADING_STATUS:
      return fetchLoadingUserReducer(state, action);
    case SUCCESS_STATUS:
      return fetchSuccessUserReducer(state, action);
    case FAILURE_STATUS:
      return fetchFailureUserReducer(state, action);
    default:
      // this should never be reached
      return state;
  }
}