Access context inside effect

Hey! 👋🏽

I’m trying out this library and I’m wondering about accessing the context within an effect.

My question regards something like this:

1. Effect on initial state updates context and transits to another state
2. Effect on the next state uses data set by the previous effect <- this is the part I’m asking about

Example

import useStateMachine from '@cassiozen/usestatemachine';

const [state, send] = useStateMachine({ count: 0 })({
  initial: 'first',
  states: {
    first: {
      on: { second: 'second' },
      effect(send, update) {
        update(context => ({ count: context.count + 1 }));
        send('second');
      },
    },
    second: {
      effect(send, update) { // <- context isn't accessible here
        console.log(state.context.count); // is this the only/correct way to access it?
      },
    },
  },
});

Being recently new to state machines, I’m wondering if this is by design and/or if context could be a parameter to the effect function. If could be added, I’d love to contribute to it!

I have used xstate a bit and there I can access context within actions and services. useEffectReducer allows access to context within effects.

[cassiozen]

This was a good catch, @gchallen - and it seems to be related to the way React works. Since this is built on top of useReducer and useEffect, when a transition happens, it will forcefully run the exit effect followed by the entry effect. If the exit callback does anything that causes a state change, it will be scheduled to happen after the entry callback.

I will investigate any possible solutions for this, but it might not be simple.

[gchallen]

I’m seeing some confusing behavior that I think is related to this change. Specifically, if I return a completion method from an effect that uses setContext, any changes made are not visible to the entry function for the next state:

// Trimmed down example that may or may not actually work, but hopefully makes the point
const [state, send] = useStateMachine<{ test?: boolean }>()({
    initial: "recording",
    states: {
      recording: {
        on: { STOP: "replaying" },
        effect({ context, setContext }) {
          return () => {
            setContext(() => ({ test: true }))
          }
        },
      },
      replaying: {
        on: { RECORD: "recording" },
        effect({ context }) {
          console.log(context?.test!) // prints undefined
        },
      },
    },
  })

I’d expect the finalizer for the recording state to run before the entry method for the replaying state, and any changes that it makes to the context object to be visible.

I can probably refactor my code to work around this, but it may be worth a note in the documentation. In my case the reason to do it this way is that the recording method returns a stop handle which has to be used to stop the recording, and it’s easier to do that within the same method rather than storing that handle somewhere so it’s visible in the entry method for the replaying state.