Quick Start

Go from zero to a working stroid store in under 2 minutes. Stroid uses named stores: declare once with createStore(name, initialState, options?), then read with useStore and update withsetStore.

stores/user-store.ts

import { createStore, setStore, useStore } from 'stroid'

// 1) Declare a named store once at module scope
createStore('users', {
  list: [] as { id: string; name: string }[],
})

// 2) Update it anywhere (mutable draft; immutable under the hood)
export function addUser(user: { id: string; name: string }) {
  setStore('users', (draft) => {
    draft.list.push(user)
  })
}

// 3) Read inside React components
export function UsersBadge() {
  const count = useStore('users', (s) => s.list.length)
  return <span>{count} users</span>
}

1. Installation

Install stroid with your package manager of choice:

Terminal

npm install stroid
# or
yarn add stroid
# or
pnpm add stroid

2. Create a Store

Declare a store once at module scope. The first argument is the store name (string); the second is your initial state object. Do not place actions in the state — mutations happen through setStore.

stores/todo-store.ts

import { createStore } from 'stroid'

type Todo = { id: number; text: string; done: boolean }

createStore('todos', {
  items: [] as Todo[],
})

3. Use in a Component

Read with useStore(name, selector?). Update anywhere withsetStore(name, draftFn). Selectors keep re-renders minimal.

components/TodoList.tsx

import { useStore, setStore } from 'stroid'

function TodoList() {
  const todos = useStore('todos', (s) => s.items)

  const toggle = (id: number) => {
    setStore('todos', (d) => {
      const todo = d.items.find((t) => t.id === id)
      if (todo) todo.done = !todo.done
    })
  }

  const remove = (id: number) => {
    setStore('todos', (d) => {
      d.items = d.items.filter((t) => t.id !== id)
    })
  }

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input type="checkbox" checked={todo.done} onChange={() => toggle(todo.id)} />
          <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>{todo.text}</span>
          <button onClick={() => remove(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  )
}

4. Add Persistence (Optional)

Pass options as the third argument to createStore.

stores/todo-store.ts

createStore(
  'todos',
  { items: [] as Todo[] },
  {
    persist: { key: 'my-todos', driver: localStorage },
    sync: true, // cross-tab
  }
)

Tip

That's it — no providers, reducers, or action types. Named stores keep the API tiny while still supporting persistence, sync, and DevTools.

Next Steps

You now have a working stroid store. Continue learning:

createStore deep dive — initialization patterns, computed values, and middleware
useStore & Selectors — prevent unnecessary re-renders with precise subscriptions
Async State — model loading, success, and error states cleanly
TypeScript Guide — advanced typing patterns and best practices