Configuring XState in the Funbook App
Learn how to integrate XState into a React Native app by creating a login flow state machine and leveraging React Context for global state management.
We'll cover the following...
Let’s see what it takes to use XState in a real app.
Adding dependencies
First things first—we need to add XState to the project. We can do so by running one of the two following commands:
# Install the latest version of XState using npmnpm install xstate@latest --save# Alternatively, install with Yarnyarn add xstate@latest --save
XState itself is an unopinionated library, much like MobX. This means it is not ready out-of-the-box to work with React.
Note: The XState documentation has a section called Recipes where we can read more on the implementation with React or other UI libraries, such as Vue or Svelte.
As for us, we need to add the React-related dependency, xstate-react. Let’s do this by running one of the two following commands:
# Install the latest version of XState-React using npmnpm install xstate-react@latest --save# Alternatively, install with Yarnyarn add xstate-react@latest --save
Creating state machines
Now that we have the dependencies ready, we can create our very first state machine. We will start with a simple example: user ...