zoukankan      html  css  js  c++  java
  • [XState] Replace Enumerated States with a State Machine

    numerating the possible states of a function is a sound way to write a function, but it is imperative and could benefit from abstraction. We can do this with a state machine.

    A state machine formalizes how we enumerate states and transitions. For the sake of clarity and to emphasize the core concepts, I will be overly verbose with my code in this lesson.

    In this lesson, we'll replace the state enum with individual state objects. We'll also replace our events toggle() and break() with events TOGGLE and BREAK. I'll also demonstrate the usefulness of the Machine's initialState getter and the transition method. Lastly, I'll show what happens when we pass erroneous states or events into our machine.

    // enumeratds states
    const STATE = {
      LIT: "lit",
      UNLIT: "unlit",
      BROKEN: "broken"
    };
    
    function lightBulb() {
      let state = STATE.UNLIT;
    
      return {
        state() {
          return state;
        },
        toggle() {
          switch (state) {
            case STATE.LIT:
              state = STATE.UNLIT;
              break;
            case STATE.UNLIT:
              state = STATE.LIT;
              this.break;
          }
        },
        break() {
          state = STATE.BROKEN;
        }
      };
    }
    
    const bulb = lightBulb();
    const log = () => {
      console.log(bulb.state());
    };
    
    bulb.toggle();
    bulb.break();
    log(); // broken

    Using xstate:

    const { Machine } = require("xstate");
    
    const lit = {
      // 'on' keyword present events
      on: {
        TOGGLE: "unlit",
        BROKEN: "broken"
      }
    };
    const unlit = {
      on: {
        TOGGLE: "lit",
        BROKEN: "broken"
      }
    };
    const broken = {
      // you can leave it empty, the same as final state
      //type: "final"
    };
    
    const states = { lit, unlit, broken };
    
    const lightBulb = Machine({
      id: "lightBulb",
      initial: "unlit",
      strict: true,
      states
    });
    
    console.log(lightBulb.transition("broken", "TOGGLE").value); // broken
    console.log(lightBulb.transition("lit", "TOGGLE").value); // unlit
    console.log(lightBulb.transition("unlit", "TOGGLE").value); // lit
  • 相关阅读:
    KMeans Algorithm
    [Little Case]Reconstruct Tangent From Point Cloud
    来本有趣的电子书——林产与木材科学导论
    Lafortune Paper In RenderMan
    【AI】人类的记忆是不是差值存储的?
    【AI】关于人工情感的一些随想
    【毕设准备】硬件准备
    《人脑之谜》读书笔记
    【原创】C#生成类属性set get
    【C#入门】第一个C#下windows程序
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12209701.html
Copyright © 2011-2022 走看看