XState

In XState, Machine Context represents the extended state of a machine. It contains all the variables that the machine needs to access and modify during its lifecycle. In the Trivia Game example, the context manages game-specific data such as:

• Current points
• Remaining lives
• Clues available
• Question data

While the machine's states track where the user is in the game flow, the context tracks the data that changes as a result of user actions or transitions.

An XState machine is composed of States and Transitions:

• States: Define the current condition or location of the application (e.g., questionStart, correctAnswer, incorrectAnswer). Each state can contain logic specific to that moment in the lifecycle.
• Transitions: Define the movement from one state to another. A transition is triggered by an event (e.g., user.selectAnswer).

In the Trivia Game, when the machine is in the questionStart state and receives the user.selectAnswer event, the transition logic determines whether the machine moves to the correctAnswer state or the incorrectAnswer state based on the correctness of the user's choice.

You can achieve state persistence by hooking a MongoDB client into a running XState Actor. This pattern allows you to save a snapshot of the Actor's state to a database and retrieve it (hydrate) whenever the Actor receives an event.

Key behaviors in this pattern:

• The Actor is bound to a single record in the database.
• The Actor only updates that specific record.
• If no record exists (e.g., on the first run), a new state record is created in the database.

This is useful for long-running stateful flows or environments where compute consistency is not guaranteed.

IMPORTANT

This pattern is a starting point and is not production-ready. For production use, ensure all connection strings are URI-encoded when authenticating to MongoDB.

XState Store uses the Standard Schema interface for type inference. You can define context, events, and emitted schemas. By default, schemas are used for type inference but not runtime validation. To enable runtime validation, use the .with(validateSchemas()) extension.

import { createStore } from '@xstate/store';
import { validateSchemas } from '@xstate/store/validate';
import { z } from 'zod';

const store = createStore({
  schemas: {
    context: z.object({ count: z.number() }),
    events: { increment: z.object({ by: z.number() }) },
    emitted: { increased: z.object({ by: z.number() }) }
  },
  context: { count: 0 },
  on: {
    increment: (context, event, enqueue) => {
      enqueue.emit.increased({ by: event.by });
      return { count: context.count + event.by };
    }
  }
}).with(validateSchemas());

When working with hierarchical or parallel machines, state values are objects rather than strings. To correctly check for specific states in your UI, use the state.matches(...) method. This is particularly effective when combined with SolidJS <Switch> and <Match> components.

const Loader = () => {
  const [snapshot, send] = useActor(/* ... */);

  return (
    <div>
      <Switch fallback={null}>
        <Match when={snapshot.matches('idle')}>
          <Loader.Idle />
        </Match>
        <Match when={snapshot.matches({ loading: 'user' })}>
          <Loader.LoadingUser />
        </Match>
        <Match when={snapshot.matches({ loading: 'friends' })}>
          <Loader.LoadingFriends />
        </Match>
      </Switch>
    </div>
  );
};

You can manage state in Svelte by creating a store with createStore and subscribing to specific parts of that state using useSelector. The useSelector hook returns a Svelte readable store, which you can access using the $ prefix in your Svelte template.

<script>
import { createStore, useSelector } from '@xstate/store-svelte';
// ...

const store = createStore({
  context: { count: 0 },
  on: {
    inc: (ctx) => ({ ...ctx, count: ctx.count + 1 })
  }
});

const count = useSelector(store, (s) => s.context.count);
</script>

<button on:click={() => store.send({ type: 'inc' })}>
  Count: {$count}
</button>

To use XState Store in an Angular component, create a store using createStore and then use injectStore to expose specific parts of the state as Angular signals. This allows you to react to state changes directly in your component templates.

import { Component } from '@angular/core';
import { createStore, injectStore } from '@xstate/store-angular';

const store = createStore({
  context: { count: 0 },
  on: {
    inc: (ctx) => ({ ...ctx, count: ctx.count + 1 })
  }
});

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="store.send({ type: 'inc' })">Count: {{ count() }}</button>
  `
})
export class CounterComponent {
  store = store;
  count = injectStore(store, (s) => s.context.count);
}

To use @xstate/store-vue in a Vue component, create a store using createStore and subscribe to specific parts of the state using the useSelector composable. This allows your component to reactively update when the selected state changes.

<script setup>
import { createStore, useSelector } from '@xstate/store-vue';
// ...

const store = createStore({
  context: { count: 0 },
  on: {
    inc: (ctx) => ({ ...ctx, count: ctx.count + 1 })
  }
});

const count = useSelector(store, (s) => s.context.count);
</script>

<template>
  <button @click="store.send({ type: 'inc' })">Count: {{ count }}</button>
</template>