Skip to content
stroid
Docsguidesdevtools
Docs for v0.0.2 - current npm release. Reduce your code, reduce your stress - never your functionality.

DevTools

stroid integrates with the Redux DevTools browser extension for time-travel debugging, action logging, and state inspection. No setup required beyond enabling the option.

Warning

This guide reflects stroid 0.0.2 (named stores). Examples use createStore(name, initial, options) and mutations via setStore.

Enabling DevTools

store.ts
import { createStore, setStore } from 'stroid'

createStore(
  'counter',
  { count: 0 },
  {
    devtools: true,
    historyLimit: 100,
  }
)

export const increment = () => setStore('counter', (d) => { d.count += 1 })

Tip

Always guard DevTools with an environment check. The DevTools connector adds a small overhead and should be disabled in production.

What You Get

  • Action logging — see every action dispatched with its payload
  • State inspection — browse the full state tree at any point
  • Time-travel — step forward and backward through actions
  • State diff — see exactly what changed with each action
  • Action replay — re-dispatch actions to reproduce bugs

DevTools Options

DevTools is enabled per store with a boolean. Control history depth via historyLimit.

options.ts
createStore('auth', initial, {
  devtools: true,
  historyLimit: 100, // default 50
})

Multiple Stores

Each store appears as a separate instance in DevTools. Give them unique name values in your code/comments to tell them apart.

FormsOverview