Quick Start

This guide gets you from install to a working app with @quantajs/core, @quantajs/react, and optional @quantajs/devtools.

1. Core Store

import { createStore } from '@quantajs/core';

export const counterStore = createStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubled: (s) => s.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

2. React Integration

import { QuantaProvider, useStore } from '@quantajs/react';
import { counterStore } from './counter-store';

function Counter() {
  const counter = useStore('counter');

  return (
    <div>
      <p>Count: {counter.count}</p>
      <p>Doubled: {counter.doubled}</p>
      <button onClick={() => counter.increment()}>+</button>
      <button onClick={() => counter.decrement()}>-</button>
    </div>
  );
}

export default function App() {
  return (
    <QuantaProvider stores={{ counter: counterStore }}>
      <Counter />
    </QuantaProvider>
  );
}

3. Selector-Based Rendering

Use selectors when components only need a slice of store data.

import { useStoreSelector, useQuantaSelector } from '@quantajs/react';
import { counterStore } from './counter-store';

function CounterCountFromContext() {
  const count = useStoreSelector('counter', (s) => s.count);
  return <p>{count}</p>;
}

function CounterCountFromReference() {
  const count = useQuantaSelector(counterStore, (s) => s.count);
  return <p>{count}</p>;
}

4. DevTools (Optional)

import { mountDevTools } from '@quantajs/devtools';

mountDevTools();

For React apps, you can also render QuantaDevTools from @quantajs/react.

What to Learn Next