XStateは有限状態機械(= 有限オートマトン）を実装するライブラリです。
まず、どういうものなのか:
import { createMachine, interpret } from 'xstate'
const toggleMachine = createMachine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: { on: { TOGGLE: 'active' } },
active: { on: { TOGGLE: 'inactive' } },
},
})
const toggleService = interpret(toggleMachine)
.onTransition(state => console.log(state.value))
.start()
toggleService.send('TOGGLE')
toggleService.send('TOGGLE')実行すると、以下のようにコンソールに出力されます。
inactive active inactive
有限オートマトンは「ある時点で、ある1つの状態になるシステム」の動作を表すことができます。チェックボックスを例に考えてみましょう。最初は「OFF」の状態だとすると、クリックすることで「ON」の状態になります。
「ON」でも「OFF」でもない、または「ON」でも「OFF」でもある状態というのはありえません。さらにクリックすると「現在はON」であることから次は「OFF」になるという変化をたどります。
つまり、以下の要素を持ちます。
- 有限個の状態を持つ（ON/OFF)
- 有限個のトリガーを持つ (toggle)
- 初期状態を持つ(OFF)
- 現在の状態とトリガーを受け取り、次の状態を決定する
- 結果を出力する
先の例を見ると
inactive -> TOGGLE -> active -> TOGGLE -> inactive ...
inactiveな状態のときにTOGGLEイベントが起こるとactiveな状態になる。activeな状態のときにTOGGLEイベントが起こるとinactiveになる、という遷移を定義しているのが見えてきました。
このような状態の遷移は状態遷移図で表現できますが、XStateでは
createMachine
の定義を視覚化ツールが用意されています。
https://xstate.js.org/viz/?gist=1792b79ec54228fd53cb23aaf9763901
UIをデザインする過程では、Componentの振る舞いと、それによってどの様にStateが変化するのか、あるいはどの様なタイミングでどの様なStateになるかを考えます。
その際に役立つのが実装視点寄りのEvent Stormingだと思いますが、個人的にこれまではOmni Graffleなどのツールで図を書きながら考えてからReduxで表現するというフローでしたが、これを使うとTrigger、Domain Event, Workflowを宣言的に記述しながら、プロトタイピングできるのではないかと思いました。