XState: Machine과 createMachine의 차이점은 무엇입니까?

XState는 머신 정의를 선언하기 위한 두 가지 옵션을 제공합니다.

import { Machine } from 'xstate';

const machine = Machine({ ...config });

...또는...

import { createMachine } from 'xstate';

const machine = createMachine({ ...config });

이것은 초보자에게 혼란 스러울 수 있습니다. 매우 유사해 보이는 두 가지 방법이 있는 이유는 무엇입니까? 차이점이 뭐야?

차이점

Javascript에서는 둘 사이에 차이가 없습니다. 완전히 상호 교환하여 사용할 수 있습니다.

Typescript에서는 그들 사이에 약간의 차이만 있습니다. 머신에 전달할 수 있는 제네릭의 순서와 관련이 있습니다. Machine를 사용하면 Context 및 Event 제네릭 중간에 'Typestates'이라는 제네릭을 전달할 수 있습니다.

import { Machine } from 'xstate';

interface Context {}

type Event = { type: 'EVENT_NAME' }

type States = {}

const machine = Machine<Context, States, Event>({ ...config });

반면 createMachine는 끝에 삽입하도록 요청합니다.

import { createMachine } from 'xstate';

interface Context {}

type Event = { type: 'EVENT_NAME' }

type States = {}

const machine = createMachine<Context, Event, States>({ ...config });

어떤 것을 선택하든 생성된 머신에는 기능상의 차이가 없습니다. 두 함수는 동일한 코드를 참조하고 동일한 방식으로 기계를 생성합니다.

무엇을 선택해야 합니까?

앞으로는 createMachine 를 사용해야 합니다. 이것이 v5가 릴리스될 때 선호되는 구문입니다. 그러나 Machine에 만족한다면 계속 사용할 수 있습니다.