setStore & Mutations

stroid lets you write state mutations with natural, mutable syntax viasetStore. Drafts feel mutable; under the hood stroid creates immutable updates so React detects changes and re-renders only what changed.

Mutable Drafts

The updater receives a mutable draft of the current state. Push to arrays, reassign fields, remove keys — write the code you want.

mutations.ts

import { createStore, setStore } from 'stroid'

createStore('users', { list: [] as User[] })

export function addUser(user: User) {
  setStore('users', (s) => {
    s.list.push(user)          // Array.push works
  })
}

export function removeUser(id: string) {
  setStore('users', (s) => {
    s.list = s.list.filter((u) => u.id !== id)  // Reassignment works
  })
}

export function updateName(id: string, name: string) {
  setStore('users', (s) => {
    const user = s.list.find((u) => u.id === id)
    if (user) user.name = name  // Nested mutation works
  })
}

setStore API

Two call styles are available: a partial object merge, or a draft mutator.

set-store.ts

import { setStore } from 'stroid'

// Partial merge (shallow)
setStore('settings', { theme: 'light' })

// Draft mutation
setStore('settings', (s) => {
  s.flags.beta = true
})

Note

setStore can be called from anywhere — React components, utilities, async functions. No provider is required; the store is keyed by name.

Automatic Batching

Multiple mutations within one setStore call are batched into a single notification. Subscribers only see the final state:

batching.ts

import { createStore, setStore } from 'stroid'

createStore('metrics', { a: 0, b: 0, c: 0 })

setStore('metrics', (s) => {
  s.a = 1  // batched
  s.b = 2  // batched
  s.c = 3  // subscribers notified once
})