service.subscribe - don't send event for initializing machine

[mstruebing]

Hello, I've written my own useEventMachine-hook based on useMachine which should care about starting with the correct state, save events to an event store and initializing the machine.

To save events I'm using service.subscribe, so far so good.
But when restoring the state a change is triggered for subscribing which leads to the event be saved. This leads to many redundant events when reloading the page quite often. For the initial state I filter for state.event.type === 'xstate.init' in my save event function, but for restoring the state I don't know if there is any way to identify if this event was user/internal triggered or from the restoring of the state.

Do you have any suggestions?

const useEventMachine = ({
  definition,
  recentState,
  contextKeysToBeRemovedBeforeSaving
}) => {
  const storage = useContext(StorageContext)
  const addTask = createTaskQueue()
  const saveEventAndState = createSaveEventAndState(definition.id, storage)

  const [state, send, service] = useMachine(definition, { state: recentState })

  useEffect(() => {
    const subscription = service.subscribe(state => {
       // This is an event automatically created by xstate on initialization
      if (state.event.type === 'xstate.init') return

      addTask(
        async prevResult =>
          await saveEventAndState(
            removeContextFromState(state, contextKeysToBeRemovedBeforeSaving),
            prevResult
          )
      )
    })

    return subscription.unsubscribe
  }, [service])

  return { state, send, service }
}

I also tried to wrap the service.subscribe in a timeout, but unfortunately that doesn't work either.

[Andarist]

The first thing that I would try would be to save the state without any events attached to it at all. If you subscribe then those events were pretty much already handled by the machine, processed - so there doesn't seem to be much point in storing them in persistence storage.

[mstruebing]

Didn't help, there is also _event but when I remove this I will get an error from state can not read data from undefined.

[Andarist]

Could you prepare a demo showcasing your problem? I would be able to look at it then.

[mstruebing]

I prepared a littel demo: https://github.com/mstruebing/xstate-subscribe-demo

1. git clone git@github.com:mstruebing/xstate-subscribe-demo.git
2. cd xstate-subscribe-demo
3. yarn install
4. yarn dev

I did a console.log what should not happen. The data will be saved in a pouch db which uses the browsers index db. In chrome you can delete it by going into your dev-tools under application -> clear storage.

I hope this helps

Edit: The whole code of interest is in src/App.js

[Andarist]

@mstruebing Thanks for the repro - I will take a look at it soon

[mstruebing]

Hey @Andarist, did you've found time to have a look? :)

[davidkpiano]

but for restoring the state I don't know if there is any way to identify if this event was user/internal triggered or from the restoring of the state.

Try state.changed instead of (or in addition to) state.event.type === 'xstate.init'.

Also, I'd avoid relying on implementation details ('xstate.init') for this - you can use state.changed === undefined to signify that it is the initial state.

In summary:

• state.changed === undefined = initial state
• state.changed === false = state did not change from previous state (no actions, no context updates, no value changes)
• state.changed === true = state changed from previous, which can mean any of the following:
  • state.value changed
  • state.context changed
  • state.actions has actions to execute