Generated by XState Viz: https://xstate.js.org/viz

machine.js

// watch console for output
// to help visualize Action Order
// https://xstate.js.org/docs/guides/actions.html#action-order
const watchActions = Machine({
  id: 'actionLoop',
	initial: 'ready',
	states: {
		ready: {
		  entry: 'logReadyEntry',
			on: {
				CLICK: {
					target: 'select',
				},
			},
		},
		select: {
			entry: 'logSelEntry',
			exit: 'logSelExit',
			on: {
				CLICK: {
					target: 'ready',
					actions: 'logSelClick',
				},
			},
		},
	}
},
{
	actions: {
		logReadyEntry: ()=>{
		  console.log('ready entry,')
		},
		logSelEntry: ()=>{
		  console.log('select entry,')
		},
		logSelClick: ()=>{
		  console.log('select-CLICK!')
		},
		logSelExit: ()=>{
		  console.log('exit select soon...')
		},
	},
})