ilokesto

Framework Usage

How to connect @ilokesto/store to React, Vue, Svelte, and Angular.

Framework Usage

@ilokesto/store ships no official framework bindings. The three-method public API — getState(), setState(next), and subscribe(listener) — is designed to be wrapped by a thin adapter in any framework.

Adapter model

Every adapter follows the same five-step flow:

  1. Read the current snapshot with store.getState().
  2. Mirror it into the framework's reactive model (ref, signal, readable, ...).
  3. Subscribe with store.subscribe(listener).
  4. On each notification, pull the new snapshot and push it into the reactive model.
  5. When the owning scope ends, call the returned unsubscribe function.

The vanilla store stays the source of truth. The adapter only translates snapshots into the framework's update model and routes writes back through store.setState.

Caveats

  • Snapshot consistency — read via getState() inside the subscription callback, not from the listener argument. React must use useSyncExternalStore for tearing-free reads.
  • Cleanup — every adapter must call unsubscribe when its owning scope ends. Missing cleanup causes the store to hold a stale reference and fire the listener forever.
  • No mutationReadonly<T> is a TypeScript hint only. The store does not freeze or deep-clone state at runtime. Treat snapshots as immutable values.
  • Synchronous notifications — the store notifies listeners synchronously after setState completes. There is no batching, debouncing, or render-layer scheduling.

Choose your framework

  • ReactuseSyncExternalStore, selector hooks, SSR hydration
  • VueshallowRef, computed, onUnmounted
  • Sveltereadable, derived, Svelte 5 runes
  • AngularInjectable service, signal, DestroyRef

On this page