@xstate/store-solid

The @xstate/store-solid package provides Solid bindings for XState Store. It includes utilities for subscribing to store state as Solid accessors, creating owner-scoped stores, and using atoms.

These are the docs for @xstate/store-solid v2. For v1 docs, see v1 docs.

This package re-exports all of @xstate/store, so you only need to install @xstate/store-solid.

Installation

npm install @xstate/store-solid

pnpm install @xstate/store-solid

yarn add @xstate/store-solid

Quick 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 accessor that subscribes to a store or atom and returns a selected value.

import { useSelector } from '@xstate/store-solid'; 

function Counter() {
  const count = useSelector(store, (state) => state.context.count);

  return <div>Count: {count()}</div>;
}

`useStore(configOrLogic, input?)`

Creates a store instance for the current Solid owner. Pass either a store config or store logic created with createStoreLogic(...).

import { createStoreLogic, useSelector, useStore } from '@xstate/store-solid'; 

const counterLogic = createStoreLogic({
  context: (input: { initialCount: number }) => ({
    count: input.initialCount,
  }),
  on: {
    inc: (context) => ({ count: context.count + 1 }),
  },
});

function Counter() {
  const store = useStore(counterLogic, { initialCount: 0 });
  const count = useSelector(store, (state) => state.context.count);

  return <button onClick={() => store.trigger.inc()}>{count()}</button>;
}

`useAtom(atomOrConfig, selectorOrInput?, compare?)`

Subscribes to an atom and returns a Solid accessor. You can pass an existing atom, or an atom config created with createAtomConfig(...).

import { createAtomConfig, useAtom } from '@xstate/store-solid'; 

const countConfig = createAtomConfig((input: { initialCount: number }) => {
  return input.initialCount;
});

function Counter() {
  const count = useAtom(countConfig, { initialCount: 0 });

  return <div>Count: {count()}</div>;
}

`useAtomState(atomOrConfig, input?)`

Creates or subscribes to an atom for the lifetime of the current Solid owner. It returns the current accessor and the live atom instance.

import { createAtomConfig, useAtomState } from '@xstate/store-solid'; 

const countConfig = createAtomConfig((input: { initialCount: number }) => {
  return input.initialCount;
});

function Counter() {
  const [count, countAtom] = useAtomState(countConfig, { initialCount: 0 });

  return (
    <button onClick={() => countAtom.set((count) => count + 1)}>
      {count()}
    </button>
  );
}

Full documentation

For complete XState Store documentation including context, transitions, effects, atoms, and more, see the XState Store docs.

@xstate/store-solid

On this page