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
  • 相关阅读:
    几句话总结一个算法之DQN
    几句话总结一个算法之Q-Learning与Sarsa
    几句话总结一个算法之Policy Gradients
    深度图像特征在推荐和广告中的应用(三)
    深度图像特征在推荐和广告中的应用(一)
    Kaggle实战之二分类问题
    Kaggle实战之一回归问题
    Deep Learning 论文解读——Session-based Recommendations with Recurrent Neural Networks
    Scala 中的函数式编程基础(三)
    Scala 中的函数式编程基础(二)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12209701.html
Copyright © 2011-2022 走看看