XState: Using `invoke` and `always` when loading data inside a state machine
When using the invoke
property to load external data you'll likely make use of the onDone
and onError
properties:
invoke: {
src: 'getDataService',
onDone: 'success',
onError: 'failure',
},
If you want to immediately do something with that successfully loaded data you can use the always
property inside the success
state with some conditions:
success: {
always: [ // <--- The good bit
{
target: 'incomingSession',
cond: 'isIncomingSession',
},
{
target: 'sessionActive',
cond: 'isSessionActive',
},
...
]
}
This is saying: When entering the success
state, always go to one of the target states based on the given condition (cond
). For example; if the current session is active (isSessionActive
), go to the sessionActive
state.
This is something that took a little while to click for me when learning XState, so hopefully this is helpful!
This state machine was used as part of the Saving Sessions campaign at Octopus Energy 👇
The dashboard for this project has a total of 11 states it could possibly be in, so a state machine felt right for this one.