Quick Start

React State Management in 2 Minutes

Learn how to use qortex-store-react to manage state in React components.

qortex-store-react re-exports everything from qortex-store, so you only need one import.

1. Create a Store

Define your store — import `createStore` directly from `qortex-store-react`:

1. Create a Store

import { createStore } from 'qortex-store-react';

const counterStore = createStore((set, get) => ({
  count: 0,
  increment: () => set({ count: get().count + 1 }),
  decrement: () => set((s) => ({ count: s.count - 1 })),
  reset: () => set({ count: 0 }),
}));

2. Use in a Component

Use `useStore` with a selector to subscribe to specific state slices:

2. Use in a Component

import { useStore } from 'qortex-store-react';

function Counter() {
  const count = useStore(counterStore, (s) => s.count);
  const increment = useStore(counterStore, (s) => s.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

3. Without a Selector

Omit the selector to get the full state (re-renders on every change):

3. Without a Selector

function CounterFull() {
  const state = useStore(counterStore);
  return <p>Count: {state.count}</p>;
}