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

Posted 2023-02-19

【中文标题】xstate - 如何正确处理转换错误？

【英文标题】：xstate - how to properly handle transitions errors?

【发布时间】：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')

【参考方案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也与根本不存在的事件相关。

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