Is there a reason why I can't reference a method declared within the same class as XState service? It seems to work fine when the method is moved outside of the class.
export class LoaderMachine {
service = interpret(createMachine<LoaderContext, LoaderEvent, LoaderState>(
{
.....
}, {
actions: {
fetch() {
this.fetchDataInsideClass(); // not callable
fetchData(); // global declaration works
},
restart() {
console.log('Recovering from error')
service.send('RESTART');
},
finished(context, event) {
console.log('Done');
}
}
}));
async fetchDataInsideClass() {
try {
console.log('Started');
service.send('SUCCESS');
} catch (err) {
console.error(`Failed with ${err}`);
service.send('ERROR');
}
}
}
async function fetchData() {
try {
console.log('Started');
service.send('SUCCESS');
} catch (err) {
console.error(`Failed with ${err}`);
service.send('ERROR');
}
}
}
However, trying to call the method results in a compilation error:
TS2349: This expression is not callable.
Not all constituents of type 'AssignActionObject<LoaderContext, LoaderEvent> | ActionObject<LoaderContext, LoaderEvent> | ActionFunction<...>' are callable.
Type 'AssignActionObject<LoaderContext, LoaderEvent>' has no call signatures