Statecharts

Does useService also handle starting and stopping the service provided from useMachine?

Yes, it does. The docs will be updated soon to highlight this.

Why is it that in xstate, when I call .nextEvents, it returns invalid events (meaning cond fails). Using xstate/react's useService & useMachine

Because it can't predict the future - the events might be valid with other payloads

And transitions where conditions fail are still enabled transitions that might execute actions

So the events are not invalid.

This example of using state machine to drive UI might be of interest (not XState but a small step away)

I might be mixing up two concepts, 'final' and 'accepting.' Anyway, using 'XState', I made a little chart that had the initial state type: 'final' that caused some errors that took a while to find.

I guess I should use some other way of representing an 'accepting' state in 'xstate' and not use final.

Hi hi, how are you fine people :)

I'm somekind new in the fsm for the UI

and currently trying to model an state machine for a form wizard, basically a sequential list of fields but there are caveats That i don't know how to model

first one, there are steps that depending on what I pick from the form, it will show one field or not

and also there is a case when the user selects something from a previews step, the wizard will be reseted to that step

this is what I've until now

const toggleFSM = FSM({
  id: "toggle",
  initial: "manufacturer",
  states: {
    manufacturer: {
      on: {
        NEXT: "mainType"
      }
    },
    mainType: {
      on: {
        NEXT: "builtYear"
      }
    },
    builtYear: {
      on: {
        NEXT: "kilometer"
      }
    },
    kilometer: {
      on: {
        NEXT: "bodyType"
      }
    },
    bodyType: {
      on: {
        NEXT: "fuelType"
      }
    },
    fuelType: {
      on: {
        NEXT: "mainTypeDetail"
      }
    },
    mainTypeDetail: {
      on: {
        NEXT: "gearType"
      }
    },
    gearType: {
      on: {
        NEXT: "doorRange"
      }
    },
    doorRange: {
      on: {
        NEXT: "SELLPOINT"
      }
    },
    SELLPOINT: {
      on: {
        NEXT: 'IMPORTANT_SALE_FACTOR | PURCHASE_DECISION' // based on what I select on this step
      }
    },
    IMPORTANT_SALE_FACTOR: {
      on: {
        NEXT: 'PURCHASE_DECISION'
      }
    },
    PURCHASE_DECISION: {
      on: {
        NEXT: 'mainTypeSub'
      }
    },
    mainTypeSub: {
      on: {
        NEXT: "zipCode"
      }
    },
    zipCode: {
      on: {
        NEXT: "email"
      }
    },
    email: {
      type: "final"
    }
  }
});

the problem, I don't know how to model a transition based on what I have selected for one step (SELLPOINT NEXT event)

and also, how to go back to any previous step and reset the context to that point

It would be wonderful if someone can explain me how to approach this

I'm trying to model something like this on the UI: http://www.wirkaufendeinauto.de/wert/3-113_9/

actions: assign({
  question: (_, e) => e.question,
    stack: ctx => ctx.stack.concat(ctx.question)
})

Sure, all you need is something like this:

function interpret(fsm) {
  let state = fsm.initialState;
  let listener;
  return {
    send: (event) => void (state = fsm.transition(state, event), listener && listener(state)),
    onTransition: _listener => listener = listener
  };
}
const service = interpret(fsm);
fsm.onTransition(state => console.log(state));
fsm.send('someEvent);