PackagesXState Store
@xstate/store-solid
The @xstate/store-solid package provides Solid bindings for XState Store. It includes utilities for subscribing to store state as Solid signals.
This package re-exports all of @xstate/store, so you only need to install @xstate/store-solid.
Installation
npm install @xstate/store-solidpnpm install @xstate/store-solidyarn add @xstate/store-solidQuick start
import { createStore, useSelector } from '@xstate/store-solid';
const store = createStore({
context: { count: 0 },
on: {
inc: (context, event: { by?: number }) => ({
count: context.count + (event.by ?? 1),
}),
},
});
function Counter() {
const count = useSelector(store, (state) => state.context.count);
return (
<div>
<p>Count: {count()}</p>
<button onClick={() => store.trigger.inc()}>+1</button>
<button onClick={() => store.trigger.inc({ by: 5 })}>+5</button>
</div>
);
}API
useSelector(store, selector?, compare?)
Creates a Solid signal that subscribes to a store and returns a selected value.
import { useSelector } from '@xstate/store-solid';
function Counter() {
// Select specific value
const count = useSelector(store, (state) => state.context.count);
// With custom comparison function
const user = useSelector(
store,
(state) => state.context.user,
(prev, next) => prev.id === next.id
);
// Call the signal to get the value (Solid's reactivity model)
return <div>Count: {count()}</div>;
}Parameters:
store- The store to subscribe toselector- Optional function to select a value from the store snapshotcompare- Optional comparison function (defaults to strict equality===)
Returns: A read-only Solid signal containing the selected value
Remember to call the signal as a function (e.g., count()) to access its value. This is how Solid's reactivity system tracks dependencies.
Full documentation
For complete XState Store documentation including context, transitions, effects, atoms, and more, see the XState Store docs.