createMachine function

The createMachine function is used to define a state machine.

import { createMachine } from 'https://cdn.skypack.dev/ficusjs@6/xstate-service'

const machine = createMachine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: { on: { TOGGLE: 'active' } },
active: { on: { TOGGLE: 'inactive' } }
}
})

Options

Actions and guards can be implemented within an options object passed as the second argument to createMachine.

actions - the mapping of action names to their implementation
guards - the mapping of transition guard (cond) names to their implementation

const definition = {
context: { amount: 0 },
id: 'glass',
initial: 'empty',
states: {
empty: {
on: {
FILL: {
actions: 'addWater',
target: 'filling'
}
}
},
filling: {
always: {
cond: 'glassIsFull',
target: 'full'
},
on: {
FILL: {
actions: 'addWater',
target: 'filling',
internal: false
}
}
},
full: {}
}
}

const options = {
actions: {
addWater: assign({
amount: (context, event) => context.amount + 1
})
},
guards: {
glassIsFull (context, event) {
return context.amount >= 10
}
}
}

// create the state machine
const machine = createMachine(definition, options)