menu
Channels
Team
Posts
Chat
Members
Info
Show previous messages

August 15, 2019 at 2:23pm

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

  • reply
  • like

August 15, 2019 at 8:38pm

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

like-fill
1
  • reply
  • like

August 20, 2019 at 5:07am

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

  • reply
  • like

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

  • reply
  • like

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

  • reply
  • like

So the events are not invalid.

  • reply
  • like

August 27, 2019 at 3:53pm

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

like-fill
1
  • reply
  • like

September 16, 2019 at 10:09pm

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.

Edited
  • reply
  • like

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

Edited
  • reply
  • like

September 20, 2019 at 2:57pm

Hi hi, how are you fine people :)

  • reply
  • like

I'm somekind new in the fsm for the UI

  • reply
  • like

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

  • reply
  • like

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

  • reply
  • like

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

  • reply
  • like

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"
}
}
});
  • reply
  • like

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

  • reply
  • like

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

  • reply
  • like

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

  • reply
  • like

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

  • reply
  • like
🙏🏼
  • reply
  • like

September 20, 2019 at 11:37pm

Take a look at the example here:

like-fill
2
  • reply
  • like

Is it possible to put this kind of logic in a function separate to the machine?

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

Thanks for the example, it is really helpful, one other question, I see you are using xstate, it is possible to create a similar functionality with /fsm, the part of sending data simillar to the send function exposed by the react hook send("NEXT", { question: nextQuestion })

like-fill
1
  • reply
  • like

or do you know of a lightweight interpreter that works with fsm that can do similar to I want to achieve, I think I don't need several of the features of xstate for what I want to get I think

  • reply
  • like

September 22, 2019 at 7:29am

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);
like-fill
1
  • reply
  • like