Solid

Use the Solid adapter inside a component or another reactive owner such as createRoot. Import from @ilokesto/state/solid.

Plain state accessor

import { createRoot } from 'solid-js';
import { create } from '@ilokesto/state/solid';

const useCounter = create({ count: 0, label: 'Clicks' });

function Counter() {
  const { state: count, setState } = useCounter((state) => state.count);
  const { state: label } = useCounter((state) => state.label);

  return <button onClick={() => setState((prev) => ({ ...prev, count: prev.count + 1 }))}>{label()}: {count()}</button>;
}

createRoot(() => useCounter((state) => state.count));

Plain state returns { state: Accessor<S>, setState }.

Reducer accessor

import { create } from '@ilokesto/state/solid';

type Action = { type: 'increment' } | { type: 'reset' };

const reduce = (state: { count: number }, action: Action) => {
  if (action.type === 'increment') return { count: state.count + 1 };
  if (action.type === 'reset') return { count: 0 };
  return state;
};

const useCounter = create(reduce, { count: 0 });

function Counter() {
  const { state, dispatch } = useCounter((state) => state.count);
  return <button onClick={() => dispatch({ type: 'increment' })}>{state()}</button>;
}

Outside reactive owner

const count = useCounter.readOnly((state) => state.count);
const dispatch = useCounter.writeOnly();
dispatch({ type: 'reset' });

Caveats

Subscribed accessors require getOwner() to exist.
The adapter uses Solid from and createMemo, so owner cleanup belongs to Solid.
Outside Solid ownership, use readOnly() for snapshots and writeOnly() for commands.

Solid

Plain state accessor

Reducer accessor

Outside reactive owner

Caveats

On this page