This document provides an overview of how to build a sign in form using the XState state machine library. It demonstrates setting up the machine configuration including states, sub-states, parallel states, events, context, actions, guards, invoking asynchronous functions, and integrating with React using the useMachine hook. Visual representations of the state machine and options for connecting it to UI components like text fields from Atlaskit are also shown.

1. BRAD WOODS | DESIGNER, FRONT-END DEV. | EASY AGILE | @BRADWOODSIO
Standing on the
Shoulders of Giants
Development with XState

18. What you want to do
How you’re going to do it

19. MACHINE CONFIG
const machineConfig = {
id: "signInForm",
}

20. STATES
const machineConfig = {
id: “signInForm”,
initial: “ready”,
states: {
ready: {},
waitingResponse: {},
}
}

21. SUB-STATES const machineConfig = {
id: “signInForm",
initial: “ready”,
states: {
ready: {
states: {
email: {
…emailStates
},
password: {
…passwordStates
},
authService: {
…authServiceStates
}
}
},
waitingResponse: {},
}
}
const emailStates = {
initial: “noError”,
states: {
noError: {},
error: {
initial: “empty”
states: {
empty: {},
badFormat: {},
noAccount: {}
}
}
}
}

22. PARALLEL STATES
const machineConfig = {
id: “signInForm",
initial: “ready”,
states: {
ready: {
type: “parallel”,
states: {
email: …,
password: …,
authService: …
}
},
waitingResponse: {},
}
}

23. EVENTS
const machineConfig = {
id: “signInForm”,
initial: “ready”,
states: {
ready: {
on: {
INPUT_EMAIL: {
target: “ready.email.noError”
},
},
…
},
waitingResponse: {},
}
}

24. CONTEXT
const machineConfig = {
id: “signInForm”,
context: {
email: “”,
password: “”
},
…

25. ACTIONS
const machineConfig = {
id: “signInForm”,
context: …
initial: “ready”,
states: {
ready: {
on: {
INPUT_EMAIL: {
target: “ready.email.noError”,
actions: “cacheEmail”
},
…

26. GUARDS SUBMIT: [
{
cond: “isNoEmail”,
target: “ready.email.error.empty”
},
{
cond: “isEmailBadFormat”,
target: “ready.email.error.badFormat”
},
{
cond: “isNoPassword”,
target: “ready.password.error.empty”
},
{
cond: “isPasswordShort”,
target: “ready.password.error.tooShort”
},
{
target: “waitingResponse
}
]

27. INVOKE
waitingResponse: {
invoke: {
src: "requestSignIn",
onDone: {
actions: 'onSuccess'
},
onError: [
{
cond: “isNoAccount”,
target: “ready.email.error.noAccount”
},
…

28. VISUALISER

29. MACHINE OPTIONS
const machineOptions = {
guards: {
isNoEmail: (context, event) => context.email.length === 0,
…
},
…
}

30. REACT HOOK
const SignInForm = () => {
const signInMachine = Machine(machineConfig, machineOptions)
const [current, send] = useMachine(signInMachine)
…

31. ATLASKIT
<Textfield
name="email"
id=“email"
ref={emailInputRef}
value={current.context.email}
onChange={e => {
send({
type: “INPUT_EMAIL”,
email: e.target.value
})
}}
disabled={current.matches('waitingResponse')}
isRequired
autoFocus />

34. bitbucket.org/bradwoods/xstate-sign-in-form
bradwoods.io/xstate/sketchnote

35. BRAD WOODS | DESIGNER, FRONT-END DEV. | EASY AGILE | @BRADWOODSIO
Thank you!