xstate: Can't transition back in history

What if I’m not interested in doing the following: some step can skip a step, so when I’m in the target step and I want to go back, I’d like to go back to the original previous step, considering if it was skipped or not:

import { Machine } from 'xstate';

const toggleMachine = Machine({
  initial: 'step1',
  states: {
    step1: { on: { next: 'step2', skipStep2: 'step3'}},
    step2: { on: { next: 'step3', BACK: 'step1' }}, 
    step3: { on: { BACK: 'step????'}}
  }
});

let currentState = toggleMachine.initialState;

function send(event) {
  currentState = toggleMachine.transition(currentState, event);
  console.log(currentState.value);
}

//Case #1
send('next'); // 'step2'
send('next'); // 'step3'
send('BACK'); // want to go back to step2

//Case #2
send('skipStep2'); // 'step2'
send('next'); // 'step3'
send('BACK'); // want to go back to step1

What if I’m not interested in doing the following: some step can skip a step, so when I’m in the target step and I want to go back, I’d like to go back to the original previous step, considering if it was skipped or not:

import { Machine } from 'xstate';

const toggleMachine = Machine({
  initial: 'step1',
  states: {
    step1: { on: { next: 'step2', skipStep2: 'step3'}},
    step2: { on: { next: 'step3', BACK: 'step1' }}, 
    step3: { on: { BACK: 'step????'}}
  }
});

let currentState = toggleMachine.initialState;

function send(event) {
  currentState = toggleMachine.transition(currentState, event);
  console.log(currentState.value);
}

//Case #1
send('next'); // 'step2'
send('next'); // 'step3'
send('BACK'); // want to go back to step2

//Case #2
send('skipStep2'); // 'step2'
send('next'); // 'step3'
send('BACK'); // want to go back to step1

I just ran into this scenario and solved it by using guarded transitions.

const toggleMachine = Machine({
  initial: "step1",
  states: {
    step1: { on: { next: "step2", skipStep2: "step3" } },
    step2: { on: { next: "step3", BACK: "step1" } },
    step3: {
      on: {
        BACK: [
          {
            target: "step1",
            cond: (_context, event) => event.meta.previousStep === "step1",
          },
          {
            target: "step2",
          }
        ]
      }
    }
  }
});

Then define the previousStep in the meta object when sending the BACK transition.

send({ type: "BACK", meta: { previousStep: current.history?.value } });

Hopefully this helps someone else!

https://codesandbox.io/s/xstate-state-machine-with-history-stack-6iq32?file=/src/index.js ^Demo of how to implement history with a back button. My example use case revolves around navigation through “screens” of a user flow through a products screens, like in https://overflow.io/examples/#wireframe-user-flows.

Thanks for this awesome library @davidkpiano, it’s a pleasure working with something this well considered. Hope this demo makes sense!

@gpietro That is possible if those created/ready/in_progress states are in a nested state:

active: {
  initial: 'in_progress',
  states: {
    created: {},
    ready: {},
    in_progress: {},
    previous: { type: 'history' }
  },
},
suspended: {
  on: { RESUME: 'active.previous' }
}

I assumed history states where used to fix the use case @diegopamio described. Why would you want to transition into a history state to revert back to the place you came from? I can’t get it to work that way though.

I’ll reopen it because I still want to verify that the behavior is correct for these cases:

• Transition is a self-transition on the current state node (internal or external)
• History exhibits the correct shallow/deep behavior on self-transition

I have similar behavior, but I am not sure if it is possible to achieve it.

I have a State Machine which can go from multiple states to another state (for example the settings page, which one can make some changes and then go back). So when going back from the settings page, I want to go back to the last accessed state.

Is it possible to do?

@carloslfu yea that’s what I’m trying to avoid, because you don’t always know where to go back to. That was a simple example but say step1 or step2 both took me to step3 – I just want to go back to where it was previously. Think of a dynamic wizard flow. Maybe this isn’t expected to be possible with the library.