[XState + Typescript] Type XState
import { assign, createMachine } from "xstate";
type FetchStates =
| {
value: "idle";
context: FetchContext & {
results: [];
message: "";
};
}
| { value: "pending"; context: FetchContext }
| {
value: "failed";
context: FetchContext & {
results: [];
message: "";
};
}
| {
value: "successful";
context: FetchContext & {
results: [];
message: "";
};
};
type FetchMachineEvents =
| { type: "FETCH" }
| { type: "RESOLVE"; results: any[] }
| { type: "REJECT"; message: string };
interface FetchContext {
results: any[];
message: string;
}
export default createMachine<FetchContext, FetchMachineEvents, FetchStates>(
{
predictableActionArguments: true,
id: "fetch",
initial: "idle",
context: {
results: [],
message: "",
},
states: {
idle: {
on: {
FETCH: "pending",
},
},
pending: {
entry: ["fetchData"],
on: {
RESOLVE: { target: "successful", actions: ["setResults"] },
REJECT: { target: "failed", actions: ["setMessage"] },
},
},
failed: {
on: {
FETCH: "pending",
},
},
successful: {
on: {
FETCH: "pending",
},
},
},
},
{
actions: {
setResults: assign((ctx, event: any) => ({
results: event.results,
})),
setMessage: assign((ctx, event: any) => ({
message: event.message,
})),
},
}
);