Root event/transition outside of states object

[mahmoudfelfel]

Hi everyone,
I was checking some XState examples on codesandbox and have a question regarding this type of machine, I'm a bit confused about the SEARCH_CHANGED event, it is outside the states object, I can see the need for it, but does that type of catch-all events has a name in state machines? my initial understanding was that each event/transition has to be inside a state as it is the thing that moves the machine from one state to another.

I tried to find something similar in the documentation guides but couldn't, is it mentioned somewhere and I missed it?

Thanks

[Andarist]

Your understanding is correct - transitions always are defined in states. However, XState currently always have an implicit “root” state and that’s why this works.

[mahmoudfelfel]

Thanks for your answer, is there any details about this root state? is it in the documentation somewhere? if I have the same event in a child state, will both be invoked or only the root one?

Somehow it doesn't feel right, a good thing about state machines is that if I'm in a specific state, I'm sure my machine will only handle events accepted by this state and will move to another state on specific transitions defined by it... but now there is a global listener that can suddenly move my machine to a totally different state, am I misunderstanding this?

[Andarist]

Thanks for your answer, is there any details about this root state?

Not rly - I don't think so. Just treat it like a regular state.

if I have the same event in a child state, will both be invoked or only the root one?

Because it's just a regular state this works like for any other 2 states that form an ancestor-descendant relationship. The most inner one has a priority so if it will be matched the no transitions upper in the tree will be matched.

but now there is a global listener that can suddenly move my machine to a totally different state, am I misunderstanding this?

This works really like any other state. Consider this:

createMachine({
    states: {
        a: {
            on: {
                'FOO': '.a3'
            },
            states: {
                a1: {
                    on: {
                        BAR: 'a2'
                    }
                },
                a2: {},
                a3: {}
            }
        }
    }
})

You can specify transitions on any given level and they act like "catch all" (well, only for events specified for them) for a machine that currently is in any descendant state of the "source" state (source state is the one that has a particular transition defined on it).