Xstate的「有限狀態機」慨念相當適合用來處理複雜的流程，如果這個流程需要同時在前後端使用，可以把整個狀態機進一步封裝，開出幾個特定接口，讓前後端使用相同的邏輯

本文將會示範封裝一個「撈取使用者資料」的狀態機，內部包含幾個假狀態，並且同時在前端(React)與後端(NodeJS，Express)來使用。

預計最後會封裝成一個套件，開出 getUser 這個非同步的function，使用端只要引入套件，給予對應的參數並呼叫此套件就能獲得資料，使用端不需要在乎狀態機內部管理的複雜邏輯

檔案介紹

套件架構

- data-package/
	├- node_module/
	├- ...
	└- src
			├- index.ts
			├- getUser.ts
			└- machine/
					└- index.ts

• getUser.ts 使用此套件的主要function，在這裡使用狀態機（機器）的邏輯
• machine/index.ts 機器放置的位置

以下針對部分檔案做說明

getUser.ts

import { interpret } from 'xstate';
import { waitFor } from 'xstate/lib/waitFor';
import { getUserMachine } from './mahcine';

export const getUser = async (id: string) => {
  const service = interpret(getUserMachine.withContext({ id })).start();

  const data = await waitFor(service, (state) => state.hasTag('finish'));

  if (data.context.error) {
    throw new Error(`[getUser] ${data.context.error}`);
  }

  return data.context.user;
};

說明：

• getUser 需要一個參數：id，這個參數會在使用機器的時候被帶進去機器的context裡面
• 使用waitFor 等待機器處理完成（出現finish的tag時），把狀態回傳（data）