Stately
XState v6 alpha

Select actor data

Track selected actor data in Vue.

XState v6 is in alpha

APIs and behavior may change before the stable release.

useSelector(...) returns a Vue ref and updates it when the selected value changes.

const actorRef = useActorRef(machine);
const count = useSelector(actorRef, (snapshot) => snapshot.context.count);

Prefer small selected values such as a count, name or snapshot.matches('loading'). Selecting the whole context updates more consumers. Pass a comparison function when a selector returns an object.

TypeScript

The selector receives the snapshot type from the actor reference.

Selectors cheatsheet

useSelector(actorRef, selector);
useSelector(actorRef, selector, compare);

On this page