はじめに

Reactでは useState や useReducer を用いた状態管理が一般的です。

しかし、画面が複雑になるにつれて、

状態とデータが混在する
親子コンポーネント間の依存が増える
「どこで状態が変わったのか」が分かりにくい

と感じることがあります。

そこで今回は、

「状態(State)」と「データ(Data)」を明確に分離する

というルールで、状態遷移を中心にしたアーキテクチャを試作しました。

考え方の着想には数学の圏論の影響がありますが、本記事では圏論そのものは扱わず、状態遷移を中心とした設計手法として紹介します。

サンプルとして、シンプルなログイン画面を実装しています。

コンセプト

この設計では、次の3つを基本ルールとしています。

Stateは意味だけを持つ
DataはRedux Storeに保存する
画面はStateのみを見て描画する

例えば Input コンポーネントであれば、

State
------
beforeInit
empty
entering
entered

入力値

"sample@example.com"

は State ではなく Data として扱います。

システム構成

React View
├── Screen
├── Login
├── Main
└── TestInput

Redux Store
└── common.data

Function Registry
└── funcStore

役割は次のように分かれています。

要素	役割
Screen	画面遷移
Login	ログイン画面全体
TestInput	入力欄の状態管理
Redux	入力データ保持
funcStore	イベント(射)の登録

状態遷移

Screen

beforeInit
      │
      ▼
    login
      │
      ▼
     main
      │
      ▼
   logout

Login

beforeInit
      │
      ▼
 noComplete
      │
      ▼
  complete

TestInput

beforeInit
      │
      ▼
    empty
      │
      ▼
  entering
      │
      ▼
   entered

画面の表示はこれらの状態だけを見て切り替えます。

DataはReduxへ

入力値はuseStateでは持ちません。

例えば

{
  "login": {
    "id": "sample@example.com",
    "password": "password"
  }
}

のように Redux Store に保存します。

UIは

State

Data

を完全に分離して考えます。

コンポーネント間通信

親子間では次の3つだけを受け渡します。

pState
pRef
mappingKey

pState

親の状態を子へ通知します。

Login
 ↓
TestInput

のように利用します。

pRef

子の状態を親へ通知します。

TestInput
 ↓
Login

親は子の状態だけを監視し、

ログインボタンを有効化する
入力完了を判定する

などを行います。

mappingKey

入力項目等の複数あるコンポーネントの差別化として使用します。
コンポーネント全体で一意になるように指定します。

射(Function)を公開する

状態遷移は直接呼び出さず、関数（本記事では圏論にならって「射」と呼びます）として公開します。

例えば

register("login", login)
register("logout", logout)

必要な場所では

call("login",[])

のように実行します。

状態遷移そのものを公開するイメージです。

この設計のメリット

状態が見やすい

Stateが意味だけを持つため、

beforeInit
empty
entering
entered

の流れが明確になります。

DataとUIが分離できる

入力値はRedux、

画面表示はState。

責務が混ざりません。

Inputの再利用が容易

Inputは

状態管理
入力管理

だけを担当します。

どの画面でも同じInputコンポーネントを利用できます。

今後改善したいこと

現在は学習用の実験実装なので、改善点も多くあります。

enumによる状態管理
状態機械の共通化
型安全なAction管理
funcStoreの改善
Redux依存の整理

などを検討しています。

まとめ

このアプリはログイン画面を作ることが目的ではありません。

Reactを

State（状態）
Data（データ）
Action（射）

に分離するとどのような設計になるかを試すための実験です。

まだ改善点は多くありますが、今後も状態機械をベースにしたフロントエンド設計を試していきたいと思います。