XState
Finite State Machineを定義する
Reactなど向けのpackageもある
>#WIP
なんか型周りが妙に筋が悪いな
型安全にするためには追加の設定が少し必要 ref
これがないとevent名などがチェックされない
types: {} as {...} というハック感漂う感じで指定するstateとcontextが別々の概念なのもよくわからない
これ過去に発行したeventsを記録したり再生したりできるのかな
できるっぽい
いやこれeventsを記録してるのではなくstateを記録してるだけだ
immutable data model的なことはできなさそうか
例
2023/12にv5が出た
>ステートチャートは、階層、同時実行、通信など、通常のステート マシンでは利用できない追加機能を追加します。
id
state machineのinstanceみたいな感じなんだ
もっとちゃんというとActor Logicのinstanceか
actorはactorを作り出せる
invoked actor
親マシンが呼び出されると開始し、その状態が終了すると消える
プロセスみたいな？
spawned actor
transitionで開始され、stopや親マシンのstop時に停止する
subscribeできる
Actor Logic
Guards
validation
event発生時やstate遷移の前後で起こす副作用
entry
state nodeに入る前に呼ばれる
exit
state nodeから終了する際に呼ばれる
例えば、遅延させたり、通信したり、XStateのcontextを更新したり
例
上の方でactionsを列挙しておいて、状態遷移時にそれを呼ぶんだ
なんで列挙する必要があるんだろう
ts const feedbackMachine = setup({
actions: {
track: (_, params: unknown) => {
track(params);
// Tracks { response: 'good' }
},
showConfetti: () => {
// ...
}
}
}).createMachine({
// ...
states: {
// ...
question: {
on: {
'feedback.good': {
actions: [
{ type: 'track', params: { response: 'good' } }
]
}
},
exit: ['exitAction']
}
thanks: {
entry: ['showConfetti'],
}
}
}); states: のキーで指定しているのはあくまでも「状態名」ってことかその状態の中でどういう内容を保持しているかはそこで表現されない
その保持したいものがcontextということか
これだけ見てもわからん
tsimport { assign, createMachine } from 'xstate';
export const toggleMachine = createMachine({
id: 'toggle',
context: { count: 0 },
initial: 'Inactive',
states: {
Inactive: {
on: { toggle: 'Active' },
},
Active: {
entry: assign({
count: ({ context }) => context.count + 1
}),
on: { toggle: 'Inactive' },
after: { 2000: 'Inactive' },
},
},
});getSnapShotして現在のやつ取れる
tsconst a = createActor(machine);
a.send({ type: 'ADD', item: { id: 1, name: 'foo', completed: false } });
const s = a.getSnapshot().context.statevisualizerがある
GUIで編集してXStateのコードをexportできる
一部有料？
状態遷移のコードを可視化できるのかなり良いな
関連