Finite state machine middleware

[universse]

First of all, thanks a lot for this library. I very much enjoy its simplicity.

I'm trying to create a finite state machine middleware based on zustand and would love to seek some feedback. Is there anything I need to look out for in particular?

Here's the implementation.

const defaultUpdater = (state, data) => ({ ...state, ...data })

const machine = (stateChart, initialData, updater = defaultUpdater) => (
  set,
  get,
  api
) => {
  api.transition = (action, data) =>
    set(currentState => {
      const nextState = stateChart.states[currentState.state].on[action]

      return nextState
        ? {
            ...updater(currentState, data),
            state: nextState
          }
        : currentState
    })

  return {
    transition: api.transition,
    state: stateChart.initialState,
    ...initialData
  }
}

And this is example usage.

const IDLE = 'idle'
const ERROR = 'error'
const LOADING = 'loading'

const FETCH = 'fetch'
const FETCH_SUCCESS = 'fetch_success'
const FETCH_ERROR = 'fetch_error'

const stateChart = {
  initialState: IDLE,
  states: {
    [IDLE]: {
      on: {
        [FETCH]: LOADING
      }
    },
    [ERROR]: {
      on: {
        [FETCH]: LOADING
      }
    },
    [LOADING]: {
      on: {
        [FETCH_SUCCESS]: IDLE,
        [FETCH_ERROR]: ERROR
      }
    }
}

const [useStore, { transition }] = create(machine(stateChart, { todos: [] }))

transition(FETCH_SUCCESS, { todos: [...] })

[JeremyRH]

At first look this seems fine. I'd have to use it a bit to give better feedback.

I guess one thing to watch out for is initialData could have properties that overwrite state or transition on the store object.