Armed Satellite

What We Are Building

A satellite UI component that can be fired.

Concepts

These are the XState concepts that will be covered in this lesson and required knowledge (if any).

Concepts Covered
  • Transitions
  • Delayed Transitions
Required Knowledge
  • Config
  • States
  • Initial State

Modelling

These are the states, events and context (if any) the machine we will be building will have.

states
  • ready
  • charging
  • warning
  • firing
events
  • FIRE_BUTTON_CLICKED

Template

Follow along and build this component step by step using the template.

Steps

Code

Define the machine's state type. This defines what states our machine can be in.

  • types.ts
  • constants.ts
  • machine.ts
  • components.ts
  • index.ts
export type StateType =
| {
context: null;
value: "ready";
}
| {
context: null;
value: "charging";
}
| {
context: null;
value: "firing";
};