码迷,mamicode.com
首页 > 系统相关 > 详细

[XState] Use an Interpreter to Instantiate a Machine

时间:2020-01-19 00:28:13      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:service   span   color   ini   check   inter   events   ice   bsp   

 

While it‘s powerful enough to have Machine.transition, it can get tedious constantly passing it a state and an event. It would be nice if we had a function that could take a machine, instantiate it, maintain the state of the machine, and give us the ability to send events to it.

This is where an interpreter comes in handy.

And interpreter takes the abstract machine and brings it to life. XState provides us a function, interpret, to do this. interpret returns to us a service and we can use that service to send events, subscribe to changes, and add callbacks to events such as onTransition

 

const { Machine, interpret } = 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
});

const service = interpret(lightBulb)
  .onTransition(state => {
    // Side effect
    if (state.value === "broken") {
      console.log("Light bulb is borken");
      service.stop();
    }

    // check the state is changed or not
    if (state.changed) {
      console.log("changed to: ", state.value);
    }
  })
  .start(); // unlit when start

service.send("TOGGLE"); // lit after toggle

service.send("BROKEN"); // borken

 

[XState] Use an Interpreter to Instantiate a Machine

标签:service   span   color   ini   check   inter   events   ice   bsp   

原文地址:https://www.cnblogs.com/Answer1215/p/12210587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!