xstate - 如何正确处理转换错误？答案

【问题标题】：xstate - how to properly handle transitions errors?xstate - 如何正确处理转换错误？
【发布时间】：2020-05-13 04:39:15
【问题描述】：

我对 Xstate 完全陌生，我很难在官方文档中找到帮助。

问题很简单，我想知道一个事件是否在不应该触发的时候触发。

我有一个在转换方面非常严格的基本工作流程，例如，如果不从“已上传”传递，我的状态就不能从“待处理”变为“已处理”。

如果我使用：

stateService.send('PROCESSED')

当状态处于“待处理”状态时，状态不会改变（正确），但是 Xstate 中是否有任何实用程序或事件实际上告诉我事务没有被触发，因为事件不允许/正确？

这是我的状态

const stateMachine = Machine(
  {
    id: 'vocalTrack',
    initial: 'PENDING',
    context: {},
    states: {
      PENDING: {
        on: {
          UPLOADED: 'UPLOADED',
        },
      },
      UPLOADED: {
        on: {
          PROCESSED: 'PROCESSED',
        },
        entry: 'onUploaded',
      },
      PROCESSED: {
        on: {
          READY: 'READY',
          ERROR: 'ERROR',
        },
        exit: 'onProcessed',
      },
      READY: {
        type: 'final',
      },
      ERROR: {
        on: {
          UPLOADED: 'UPLOADED',
        },
        type: 'final',
      },
    },
  },
  {
    actions: {
      onUploaded: (context, event) => {
        console.log(`++++ onUploaded action: ++++`)
      },
      onProcessed: (context, event) => {
        console.log(`++++ onProcessed action: ++++`)
      },
    },
  },
)

const stateService = interpret(stateMachine)
stateService.init('PENDING')

// I'd like to catch the following workflow errors
stateService.send('UPLOADED')
stateService.send('PROCESSED')

【问题讨论】：

标签： xstate

【解决方案1】：

没有任何选项可以传递给机器或解释调用来“免费”给你这个。不过，您可以轻松地向“onTransition”方法添加一些逻辑：

选项 1，在 state.changed 上验证：

    service.onTransition(state => {
        if (state.changed) {
            console.log(`The state did change, so ${state.event.type} caused a valid transition`);
        } else {
            console.log(`${state.event.type} did not cause a state change`);
        }
    })

选项 2，根据 state.value 和事件名称进行验证：

    service.onTransition(state => {
        if (state.event.type === 'xstate.init'){
            console.log('Init Transition');
            return;
        }
        if(state.value === state.event.type){
            console.log('Transition Valid');
        }else {
            console.log('Transition Invalid');
        }
    })

选项 1 可能是首选解决方案！您可以在文档中阅读更多关于它的信息here。以下SO question也与根本不存在的事件相关。

我创建了一个小型演示应用程序来演示这一点：

【讨论】：