Intro: Xstate and State Machines (React)
Xstate reduces the state management complexity. With Xstate application is much easier for maintenance!
You’re not familiar with State machines. My article is the perfect into level.
Xstate overview
Do you love math ? If the answer is No don’t close the current tab. Give me a chance!
xState uses mathematical model: Finite-state machine. The main advantage is: You can define how the business logic will be behind each state and more important you can restrict your states!!!
Why this is important ? Now is the perfect time for example. Let’s say we have a simple react component. The react component has two radio buttons
- Male.
- Female
The default state is: unknown.
Let’s discuss all possible transitions and restrictions.
- Transition from unknown to male
- Transition from unknown to female
- Transition from male to female
- Transition from female to male
- The transition from male to unknown is forbidden.
- The transition from male to unknown is forbidden.
React state is a complex subject ? Not with Xstate.
The first advantage if you use: Xstate is Visualizer(https://xstate.js.org/viz/). My gender machine has visual representation:
How many libraries you know with Visualizer(https://xstate.js.org/viz/) ? My answer is 0. Several benefits your application wins with xstate
- unknown state is unreachable from male or female state
- Visualizer gives you opportunity to share your work with your teammates. Of course to debug in real time each option
- React: Separation between business logic and view (React components)
- The source code is much easier for reading
The source code behind my xstate machine is:
// gender-state-machine.js/**
* Machine tracks gender options(male or female)
* Transition from male / female to unknown is forbidden.
*/
const machine = Machine({
id: "genderMachine",
initial: "unknown",
states: {
unknown: {
on: {
FEMALE_OPTION: "female",
MALE_OPTION: "male"
}
},
male: {
on: {
FEMALE_OPTION: "female"
}
},
female: {
on: {
MALE_OPTION: "male"
}
}
}
});
Talk is cheap. Show me the code
I want to share with you my React component
If you want to use xstate you need to install:
npm i xstate @xstate/react
We need to import Xstate React hook:
import { useMachine } from "@xstate/react";
Now is the time for us to import: Gender Machine
import genderMachine from "./gender-state-machine"
The next step is creating a new React hook:
const [current, send] = useMachine(genderMachine);
Key components:
current.value
access the current states
current.matches('male')
is equal to true if the state is male
current.matches('female')
is equal to true if the state is female
Let’s build the UI
import React from "react";import { useMachine } from "@xstate/react";import genderMachine from "./gender-state-machine";export default function App() {
const [current, send] = useMachine(genderMachine); const setMale = () => {
send("MALE_OPTION");
}; const setFemale = () => {
send("FEMALE_OPTION");
}; return (
<>
<h2>{current.value}</h2>
<button onClick={setMale}>Male</button>
<button onClick={setFemale}>Female</button>
</>
);
}
I want to improve the application. My goal is current.mathes
to disable buttons
<button disabled={current.matches("male")} onClick={setMale}>Male</button><button disabled={current.matches("female")} onClick={setFemale}>Female</button>
Live Demo:
Summary
If you’re boring to manage state with boolean variables. Now is the moment to add xState in your tooling set.
If you’ve interest to learn: xState the resource table is