gpx.js

{
	id: 'Root',
	initial: 'after map loaded',
	states: {
		'before map loaded': {
			on: {},
			states: {}
		},
		'after map loaded': {
			on: {},
			states: {
				'route color': {
					on: {},
					states: {}
				},
				'map style': {
					on: {},
					states: {}
				},
				'gpx upload': {
					on: {},
					states: {
						pending: {
							on: {},
							states: {}
						},
						failure: {
							on: {},
							states: {}
						},
						success: {
							on: {},
							states: {},
							type: 'parallel'
						}
					}
				}
			},
			type: 'parallel',
			initial: 'route color'
		}
	},
	on: {}
}

將 color 與 style 放在 subMachine{} 內，這樣寫一次即可供 before load 與 after load 使用。

//
const subMachine = {
	type: 'parallel',
	states: {
		'route color': {
			on: {},
			states: {}
		},
		'map style': {
			on: {},
			states: {}
		}
	}
}

//
const main = {
	id: 'Root',
	initial: 'before map loaded',
	states: {
		'before map loaded': {
			on: {},
			states: {}
		},
		'after map loaded': {
			initial: 'route color',
			on: {},
			states: {
				loading: {
					on: {},
					states: {
						pending: {
							on: {},
							states: {}
						},
						failure: {
							on: {},
							states: {}
						},
						success: {
							on: {},
							states: {},
						}
					}
				},
				'before load': {
					on: {},
					states: subMachine
				},
				'after load': {
					on: {},
					states: subMachine
				}
			}
		}
	},
	on: {}
}