Day19 - Interpreting Machines - 2 ：使用 interpret API

1. 写好 Machine Config 传入 `createMachine` API

const doorMachine = createMachine({
  // Machine identifier
  id: "door",

  // Initial state
  initial: "关着",

  // State definitions
  states: {
    关着: {
      on: {
        // 也可以用字串描述
        开门: "开了"
      }
    },
    开了: {
      on: {
        // 可用物件描述
        关门: { target: "关着" }
      }
    }
  }
});

2. 使用 interpret 建立 instance / service

使用 interpret API 来建立 service，并且透过 onTransition 监听转移，每当有转移时就可以执行一个 callback ，参数是 state ，我们这里先尝试用 console 每当转移时就印出 state。

// Interpret the machine, and add a listener for whenever a transition occurs.
const service = interpret(doorMachine).onTransition((state) => {
  console.log(`State is ${state.value}`);
});

3. 与 service 互动

3-1. 启动 service

// Start the service
service.start();

3-2. 操作 service，派发事件

console.warn("send Event 开门");
service.send("开门");  // 用 string 表示 event 
console.warn("send Event 关门");
service.send("关门");
console.warn("send Event 关门 again");
// 关着状态 + 关门事件，不转移状态
service.send({ type: "关门" });  // 也可以用 object 表示 event
console.warn("send Event 开门 again");
service.send({ type: "开门" });

3-3. 结束 service （当你不再需要使用这个状态机时）

// Stop the service when you are no longer using it.
service.stop();

假设此时我们在底下继续执行这个 instance

// Stop the service when you are no longer using it.
service.stop();
console.warn("send Event 开门 again");
service.send({ type: "开门" });

它不会继续运作，我们会看到 XState 在主控台用 warning 提示，此时可以再透过 start 方法，重启 service

// Restart the machine
service
  .start()
  .onTransition((state) =>
    console.error("重启了的 Machine State 是 ", state.value)
  );
  
service.send({ type: "关门" });

codesandbox Demo