Firstly, here’s the code. I need to fix.
Basically, there are two machines:
currentStateMachine:
send commands) once a second based on the real state;context to store the current timestamp and the state;intervalsMachine with the context of currentStateMachine?currentStateMachine wait for invoke completion before accepting another state event? Or will it wait until the state is processed and only after that a new event is processed?intervalsMachine:
context to store startTime of the interval, its length and the state during this interval;How to invoke intervalsMachine (invoked machine) with the context of currentStateMachine (machine that invokes intervalsMachine)?
Will currentStateMachine wait for invoke completion before accepting another state event? Or will it wait until the state is processed and only after that a new event is processed?
You can use the data property with invoke to specify context to be taken from the parent.
const timerMachine = createMachine({
id: 'timer',
context: {
duration: 1000 // default duration
}
/* ... */
});
const parentMachine = createMachine({
id: 'parent',
initial: 'active',
context: {
customDuration: 3000
},
states: {
active: {
invoke: {
id: 'timer',
src: timerMachine,
// Deriving child context from parent context
data: {
duration: (context, event) => context.customDuration
}
}
}
}
});
https://xstate.js.org/docs/guides/communication.html#invoking-with-context
Another option is you can use the (ctx, evt) => ... pattern for the src option.