XState
https://gyazo.com/3ca83c49c6110e7ea0a2ad058614b4ff
Reactなど向けのpackageもある
なんか型周りが妙に筋が悪いなmrsekut.icon
これがないと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から終了する際に呼ばれる
例
上の方でactionsを列挙しておいて、状態遷移時にそれを呼ぶんだ
なんで列挙する必要があるんだろう
code: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' } }
]
}
},
}
thanks: {
}
}
});
states:のキーで指定しているのはあくまでも「状態名」ってことかmrsekut.icon
その状態の中でどういう内容を保持しているかはそこで表現されない
その保持したいものがcontextということか
これだけ見てもわからん
code:ts
import { 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して現在のやつ取れる
code:ts
const a = createActor(machine);
a.send({ type: 'ADD', item: { id: 1, name: 'foo', completed: false } });
const s = a.getSnapshot().context.state
visualizerがある
GUIで編集してXStateのコードをexportできる
一部有料？
状態遷移のコードを可視化できるのかなり良いなmrsekut.icon
関連