Best practices for transitioning to parent states?

[UberMouse]

How do people transition to parent states? It's easy to transition to child states with . but I'm not aware of any way to go back up the state hierarchy. Is this because it's bad practice? The way I do it currently is assign an id with the same name as the state to any states I need to transition to that aren't direct siblings/childs of the states that transition to it, which works fine, just feels like a bit of a hack.

[davidkpiano]

Can you share code? In general, there is possibly a better way to model transitioning to a parent state, depending on the situation.

For instance, you can make use of final states, and use onDone transitions on the parent state, which is a cleaner separation.

Think of it in a real-world scenario: a subordinate would never tell some leader what to do. Instead, a subordinate would notify the leader that they are done, and the leader will decide what to do given that information.

[UberMouse]

Here's a snippet from a machine that made me ask this question. invokePromise is a utility method I wrote that handles the logic around checking if a promise was successful or not (we use GraphQL and mutations are set up that a rejection is always a failure but a resolution could be either success or fail).

Basically this part of the machine is in an idle state until you attempt to switch branch, where it switches to a state that handles that and bounces through an error state if something goes wrong. But I always want it to end up back in the idle state.

            initial: "idle",
            states: {
              idle: {
                id: "idle",
                on: {
                  BRANCH_CLICKED: "switchingBranch",
                },
              },
              switchingBranch: {
                initial: "switching",
                states: {
                  switching: {
                    invoke: invokePromise({
                      name: Services.switchBranch,
                      successTarget: "#idle",
                      errorTarget: "failed",
                    }),
                  },
                  failed: {
                    entry: Actions.notifyBranchSwitchFailure,
                    always: {
                      target: "#idle",
                    },
                  },
                },
              },
            },

[rjdestigter]

I quite like the pattern where you send events in child states to transition parent states:

            initial: "idle",
            on: { IDLE: 'idle' },
            states: {
              idle: {
                id: "idle",
                on: {
                  BRANCH_CLICKED: "switchingBranch",
                },
              },
              switchingBranch: {
                initial: "switching",
                states: {
                  switching: {
                    invoke: invokePromise({
                      name: Services.switchBranch,
                      onDone: { actions: send('IDLE') },
                      errorTarget: "failed",
                    }),
                  },
                  failed: {
                    entry: [Actions.notifyBranchSwitchFailure, send('IDLE')],
                  },
                },
              },
            },