Manage Component State with a React Automata State Machine

Tomasz Łakomy
InstructorTomasz Łakomy

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

In this lesson we are going to use a completely different approach to managing React component internal state than most of React devs are used to. Instead of manually handling the transitions from one state to another we are going to use React Automata which allows us to create a state machine object describing possible states of the component and possible transitions between them and use it in a React component.

We are going to see an example of React Automata in action while developing a simple traffic light component, but this declarative state approach can be used to create whole React applications as an alternative to other state management solutions.

Instructor: [00:00] We have a simple React application which simulates traffic lights. By default, it said Stop because it's a red light. We can click Next to go to the next state, which is yellow light, and click Next again to go to the green light, and we can go. We can also do it in an opposite direction. By clicking Prev, I can go to yellow and then to red.

[00:21] We would like to manage this application internal state using state machines and react-automata. We are going to start with a component like this. We have three divs, one for Stop, Wait, and Go. We want to display only one of those, depending on the component's state. We also have two buttons which allow us to go to the previous and to the next state.

[00:46] Next, import { State, Action, withStateMachine } from 'react-automata'. Next, create a statechart object. Our initial state is going to be set to red. Statechart also has a field called states, which is an object describing the transitions from one state to another. In this case, there are three possible states.

[01:12] Starting with the initial red state, there are going to be two possible inputs to the state machine. We're going to have a prev input, which is going to put the state machine in the previous state, in this case from red to green, and next, which is going to put the state machine to the next state. In this case, we're going to go from red light to a yellow one.

[01:33] Repeat the same process for all the other states, so for yellow and green. For yellow, the previous state is set to red, and next one is set to green. For green light, the previous state is going to be yellow, and the next one is going to be red.

[01:50] Next, attach the statechart object to our app component. To do that, use a withStateMachine function. We need to pass a statechart to it. It's going to return a function which is going to be executed with our component as an argument.

[02:08] After doing that, the app component now has a transition prop, which is a function we can use to transition from one state to another. In this case, it's going to be a transition to the previous state. We're going to do exactly the same for the next item, which is going to transition to the next one.

[02:27] Now, after we save it, we can click Next and Previous buttons to go to the next state, but we cannot see it yet. To see the current state of our component, we're going to use the state component we've imported from react-automata. Next, wrap those three Stop, Wait, and Go elements inside of a state component.

[02:48] We also need to provide an if property. For instance, if the state is red, then this part of the app is going to be visible only when the state is set to red. We're going to do exactly the same for yellow and also for green. After we save it and refresh the page, we have our desired effect.

[03:08] To compare the app with our statechart, the initial state is red. We have a stop sign. To go to the next state, we press Next. We end up in the yellow state. The next one is going to be green. We can also go to the previous state. By pressing Prev, we can go to yellow and to red.

[03:28] Because we've described all those transitions in our statechart, you can control the state of your component without writing a single if statement.