React + XState: How do we restart the state machine?

[jonathanstiansen]

Hey guys,

I'm using useMachine hook - and I'd like to have a general button that resets the state back to the beginning.

Things I've tried:

1. adding a state transition ({on: {"RESET": 'firstNode'}}) outside of any specific state, that takes the machine back to the start (doesn't work)
2. Tried to force the state object to become the old state object, but state is immutable so that didn't work

How can I go about this?

(for 1 it I tried to add the line {on: {'RESET': 'idle'}}

const machine = ({
  id: "something",
  initial: "idle",
# tried here, didn't recognize idle as a state (likely because it was defined in a later scope
  states: {
  # tried adding it here but didn't do anything
    idle: {
      on: {},
    },
  },
})

[VanTanev]

When referencing a state from the root, you can do it using a relative path -- .idle -- or an absolute path #something.idle.
https://xstate.js.org/docs/guides/ids.html#relative-targets

So, something like this should work:

const machine = createMachine({
  id: "something",
  context: {
    val1: 1,
    val2: 2
  },
  on: {
    RESET: {
      target: '.idle',
      actions: assign(context => {
        return {
          val1: 1,
          val2: 2,
        }
      })
    }
  },
  initial: "idle",
  states: {
    idle: {
      // ...
    },
  },
})

[benny-noumena]

The documentation states that calling service.stop() followed by service.start() should set the initial state. However for me this is not the case. So I was wondering if I do something wrong here.

https://xstate.js.org/docs/guides/interpretation.html#starting-and-stopping

[benny-noumena]

Thank you for your fast response. What about exposing a method like reset()? My setup is a bit complicated as I have a inner web-component that should stay the same. When I change the key, that component is re-rendered too.

[Andarist]

What about exposing a method like reset()?

This only sounds simple 😅 I mean, it's not the most complicated thing in the world to make it work but it has some subtle implications associated with it and I don't think we plan to introduce this right now.

Note though... that you can always introduce an explicit RESET event to your machine and handle that reset "manually". The advantage of this approach will be that your reset will become part of your model, visualization, and all. By using smth like .reset() you essentially want to bypass what makes XState a great tool (modeling).

[benny-noumena]

Ok, I will use a RESET event then but that keeps me from using type: final right?

[Andarist]

Hmm, sort of - you might not be able to use type: final on a direct child of the root. But, on the other hand, type: final is mostly useful for communicating the "done" state to the parent machine and you don't have any parent there anyway. So part of the question would be - what you are using type: final for there?

[benny-noumena]

I don't use it. I was not sure if final is need or not. Many thanks for your help! Much appreciated.

[bombillazo]

Hey @jonathanstiansen did you find an answer to this?