Statecharts (aka state-machines) have been used in UI development for decades. This talk will explain how they work in comparison with other state-management paradigms such as Redux. I will dive into the pros and cons of statecharts and provide in depth examples of how they can be used with React.
9. • What if the user clicks the submit button repeatedly? 😛
• What if the user wants to cancel the submit while it's in-flight? ✈
• What if the user mischievously enables the disabled button? 😕
• Is there any indication that the request is fetching? 🙄
• What happens if there's an error? Can the user resubmit the form? ❓
• What if the user submits and then clicks a different page? What should
happen? 🤷
10. It seems we don’t have a
technological problem. We
have a thinking problem.
11. How do we set ourselves to
answer these questions, and be
able to have both our design
and our code depend on the
answers?
23. • What if the user clicks the submit button repeatedly? 😛
• What if the user wants to cancel the submit while it's in-flight? ✈
• What if the user mischievously enables the disabled button? 😕
• Is there any indication that the request is fetching? 🙄
• What happens if there's an error? Can the user resubmit the form? ❓
• What if the user submits and then clicks a different page? What should happen? 🤷
Empty form
Submitting
SUBMIT
24. • What if the user clicks the submit button repeatedly? 😛
• What if the user wants to cancel the submit while it's in-flight? ✈
• What if the user mischievously enables the disabled button? 😕
• Is there any indication that the request is fetching? 🙄
• What happens if there's an error? Can the user resubmit the form? ❓
• What if the user submits and then clicks a different page? What should happen? 🤷
Empty form
Submitting
SUBMIT
SUBMIT
25. • What if the user clicks the submit button repeatedly? 😛
• What if the user wants to cancel the submit while it's in-flight? ✈
• What if the user mischievously enables the disabled button? 😕
• Is there any indication that the request is fetching? 🙄
• What happens if there's an error? Can the user resubmit the form? ❓
• What if the user submits and then clicks a different page? What should happen? 🤷
Empty form
Submitting
SUBMIT
SUBMIT
CANCEL
26. • What if the user clicks the submit button repeatedly? 😛
• What if the user wants to cancel the submit while it's in-flight? ✈
• What if the user mischievously enables the disabled button? 😕
• Is there any indication that the request is fetching? 🙄
• What happens if there's an error? Can the user resubmit the form? ❓
• What if the user submits and then clicks a different page? What should happen? 🤷
Empty form
Submitting
SUBMIT
SUBMIT
CANCEL
Error
REJECT
27. Such diagram can be
described using JSON and
our UI code can directly be
driven by its description.
30. The term state used within
the statechart formalism
simply describes a textual
label which drives our
program in understanding
what needs to happen.
31. To the contrary, in the
React world the term state
usually describes some
data that we use to render
our components.
40. Redux and Statecharts
const initialState = null;
function reducer(state = initialState, action) {
return machine
.transition(state, action.type)
.value;
}
store.dispatch({ type: SUBMIT });
store.dispatch({ type: RESOLVE, payload });
store.dispatch({ type: REJECT });
store.dispatch({ type: TRY_AGAIN });
function resolveReducer(state = null, action) {
switch (action.type) {
case RESOLVE:
return action.payload;
default:
return state;
}
}
render() {
const renderMap = {
[submitting]: // request in flight, render a spinner
[success]: renderMessage(this.props.resolveData)
[error]: // render error message + try again link
[init]: // waiting for input, render login form
}
return renderMap[this.props.state];
}
41. Statecharts provide us with
a visual formalism that can
tie the functioning of our
code and our designs
together.
42.
43. Whenever you find yourself
writing lots of isSomething
variables in your state,
maybe it’s time to give
statecharts a try!
44. Further reading:
Pure UI Control by Adam Solove https://medium.com/@asolove/
pure-ui-control-ac8d1be97a8d
STATECHARTS: A VISUAL FORMALISM FOR COMPLEX SYSTEMS
http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/
resources/statecharts.pdf
You are managing state? Think twice. by Krasimir Tsonev
http://krasimirtsonev.com/blog/article/managing-state-in-
javascript-with-state-machines-stent
Infinitely Better UIs with Finite Automata by David Khourshid
https://www.youtube.com/watch?v=VU1NKX6Qkxc
Rambling thoughts on React and Finite State Machines by
Ryan Florence https://www.youtube.com/watch?v=MkdV2-U16tc