如何从xstate

Question

给出xState fsm，例如counter或search示例。

如何枚举可能的过渡？我尝试过

const current = service.state
const stateNode = service.machine
const isActive = !stateNode.parent || current.matches(stateNode.path.join('.')) || undefined
getEdges(<where do I get this node?>, { depth: 0 }).reduce((actions, edge) 

问题是我不知道将什么作为第一个参数提交给getEdges。 fsm刚开始时，交出stateNode不会产生任何边缘。但是，xState VIZ应用程序清楚地显示了活动状态已转换。

Answer 1

我玩过@xstate/graph的各个部分，这个示例与您想要的内容非常接近：

import { Machine } from "xstate"

import { getShortestPaths } from '@xstate/graph'

export const feedbackMachine = Machine({
    id: 'feedback',
    initial: 'question',
    states: {
        question: {
            on: {
                CLICK_GOOD: 'thanks',
                CLICK_BAD: 'form',
                CLOSE: 'closed',
                ESC: 'closed',
                REMOVE_ME: 'nope'
            }
        },
        form: {
            on: {
                SUBMIT: 'thanks',
                CLOSE: 'closed',
                ESC: 'closed'
            }
        },
        nope: {
            on: {

            }
        },
        thanks: {
            on: {
                CLOSE: 'closed',
                ESC: 'closed'
            }
        },
        closed: {
            type: 'final'
        }
    }
})

const showPaths = () => {
    const paths = getShortestPaths(feedbackMachine)
    const states = Object.keys(paths).filter(k => paths[k].weight > 0)
    console.log(states)
    // [""thanks"", ""form"", ""closed"", ""nope""]
}

showPaths()

在问题状态下从可能的过渡中删除REMOVE_ME: 'nope'后，结果应为：[""thanks"", ""form"", ""closed""]中的showPaths

我还看到getEdges最近已从@xstate/graph中删除，所以暂时不要使用它。