@xstate/store-svelte
The @xstate/store-svelte package provides Svelte bindings for XState Store. It includes utilities for subscribing to store state as Svelte readable stores and creating component-scoped stores.
These are the docs for @xstate/store-svelte v2. For v1 docs, see v1 docs.
This package re-exports all of @xstate/store, so you only need to install @xstate/store-svelte.
Installation
npm install @xstate/store-sveltepnpm install @xstate/store-svelteyarn add @xstate/store-svelteQuick start
<script lang="ts">
import { createStore, useSelector } from '@xstate/store-svelte';
const store = createStore({
context: { count: 0 },
on: {
inc: (context, event: { by?: number }) => ({
count: context.count + (event.by ?? 1),
}),
},
});
const count = useSelector(store, (state) => state.context.count);
</script>
<div>
<p>Count: {$count}</p>
<button on:click={() => store.trigger.inc()}>+1</button>
<button on:click={() => store.trigger.inc({ by: 5 })}>+5</button>
</div>API
useSelector(store, selector?, compare?)
Creates a Svelte readable store that subscribes to an XState store and returns a selected value.
<script lang="ts">
import { useSelector } from '@xstate/store-svelte';
const count = useSelector(store, (state) => state.context.count);
const snapshot = useSelector(store);
</script>
<div>Count: {$count}</div>useStore(configOrLogic, input?)
Creates a component-scoped store instance from a store config or store logic.
<script lang="ts">
import {
createStoreLogic,
useSelector,
useStore,
} from '@xstate/store-svelte';
const counterLogic = createStoreLogic({
context: (input: { initialCount: number }) => ({
count: input.initialCount,
}),
on: {
inc: (context) => ({ count: context.count + 1 }),
},
});
const store = useStore(counterLogic, { initialCount: 0 });
const count = useSelector(store, (state) => state.context.count);
</script>
<button on:click={() => store.trigger.inc()}>{$count}</button>If the store logic requires input, the input argument is required.
Full documentation
For complete XState Store documentation including context, transitions, effects, atoms, and more, see the XState Store docs.