useMachineTransition.js

export function useMachineTransition (transitionName) {
  const {
    states,
    state,
    setState,
    context,
    setContext,
  } = useContext(StateMachineContext)

  return useAsyncCallback(async (payload = {}) => {
    const definition = states?.[state]?.[transitionName]

    if (typeof definition === 'undefined') {
      throw new Error(`Invalid transition ${transitionName} from ${state}`)
    }

    let snapshot = Object.freeze({ ...context })

    const setSnapshot = (fn) => {
      snapshot = Object.freeze(fn(snapshot))
    }

    await definition.handlers.reduce((prev, cur) => {
      return prev.then(() => cur({
        context: snapshot,
        setContext: setSnapshot,
      }, payload))
    }, Promise.resolve())

    setState(definition.target)
    setContext({ ...snapshot })
  })
}