use-machine
use-machine copied to clipboard
Support needed for Typescript
I was following your example from README to create a simple state machine with Typescript, but I got TS error:
Argument of type '{ actions: { sideEffect: () => void; }; }' is not assignable to parameter of type 'MachineOptions<TContext, TEvent>'. Type '{ actions: { sideEffect: () => void; }; }' is missing the following properties from type 'MachineOptions<TContext, TEvent>': guards, activities, services, delays, updater
Here is my code:
import { MachineConfig, assign } from "xstate";
import { TCreateContext } from "use-machine";
export type TContext = {
counter: number;
};
export type TSchema = {
states: {
Off: {};
On: {};
};
};
export type TEvent = {
type: "Tick";
};
const incAction = assign<TContext>(context => ({
counter: context.counter + 1
}));
export type TMachine = TCreateContext<TContext, TSchema, TEvent>;
export const machineConfig: MachineConfig<TContext, TSchema, TEvent> = {
initial: 'Off',
context: {
counter: 0
},
states: {
Off: { on: { Tick: { target: 'On', actions: [incAction, 'sideEffect'] } } },
On: { on: { Tick: { target: 'Off', actions: incAction } } }
}
}
And than in component I'm just calling
const machine = useMachine<TContext, TSchema, TEvent>(machineConfig, {
actions: {
sideEffect: () => console.log('sideEffect')
}
})
Any idea what I'm missing in this example? Thanks
Hi @toncic, here is an updated example https://github.com/carloslfu/use-machine/blob/master/src/index.spec.tsx#L10.