valtio-define

⚡ Quickly create a fully functional and robust Valtio factory

Installation

npm install valtio-define

Usage

Basic Store

import { defineStore, useStore } from 'valtio-define'

const store = defineStore({
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    },
  },
})

function Counter() {
  const state = useStore(store)
  return (
    <div>
      <button onClick={store.increment}>Increment</button>
      <div>{state.count}</div>
    </div>
  )
}

With Getters

const store = defineStore({
  state: () => ({ count: 0 }),
  getters: {
    doubled() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

function Counter() {
  const state = useStore(store)
  return (
    <div>
      <div>
        Count:
        {state.count}
      </div>
      <div>
        Doubled:
        {state.doubled}
      </div>
      <button onClick={store.increment}>Increment</button>
    </div>
  )
}

Async Actions with Status

import { defineStore, useStatus, useStore } from 'valtio-define'

const store = defineStore({
  state: () => ({ data: null }),
  actions: {
    async fetchData() {
      const response = await fetch('/api/data')
      this.data = await response.json()
    },
  },
})

function DataComponent() {
  const state = useStore(store)
  const status = useStatus(store)

  return (
    <div>
      {status.loading && <div> Store all actions are loading...</div>}
      {status.finished && <div> Store all actions are finished...</div>}
      {status.error && <div> Store all actions are error...</div>}

      {status.fetchData.finished && <div> Data fetched successfully...</div>}
      {status.fetchData.error && (
        <div>
          {' '}
          Error fetching data:
          {status.fetchData.error.message}
        </div>
      )}
      {state.data && <div>{JSON.stringify(state.data)}</div>}
      <button onClick={store.fetchData}>Fetch Data</button>
    </div>
  )
}

Persistence

const store = defineStore(
  {
    state: () => ({ count: 0 }),
    actions: {
      increment() {
        this.count++
      },
    },
  },
  {
    persist: true // or { key: 'my-store', storage: localStorage, paths: ['count'] }
  }
)

If the persist is a boolean value, it will use structure-id to generate a unique key for the store.

Subscribe to Changes

const store = defineStore({
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    },
  },
})

// Subscribe to state changes
const unsubscribe = store.$subscribe((state) => {
  console.log('State changed:', state)
})

// Subscribe to status changes
const unsubscribeStatus = store.$subscribe.status((status) => {
  console.log('Status changed:', status)
})

Patch State

// Patch with object
store.$patch({ count: 10 })

// Patch with function
store.$patch((state) => {
  state.count += 5
})

Signal (JSX Component)

function App() {
  return (
    <div>
      {store.$signal(state => (
        <div>
          Count:
          {state.count}
        </div>
      ))}
      {store.$signal.status(status => (
        status.loading && <div>Loading...</div>
      ))}
    </div>
  )
}

API

defineStore(store, options?)

Creates a store with state, actions, and getters.

Parameters:

• store.state: Initial state object or factory function
• store.actions: Object containing action methods
• store.getters: Object containing getter methods
• options.persist: Persistence configuration (boolean or object)

Returns: Store instance with reactive state and actions

useStore(store)

React hook that returns a snapshot of the store state.

Parameters:

• store: Store instance created by defineStore

Returns: Snapshot of the store state

useStatus(store)

React hook that returns the status of all actions.

Parameters:

• store: Store instance created by defineStore

Returns: Status object with loading, finished, and error states

proxyWithPersistent(initialObject, options?)

Creates a persistent proxy state.

Parameters:

• initialObject: Initial state object
• options.key: Storage key (auto-generated if not provided)
• options.storage: Storage instance (defaults to localStorage)
• options.paths: Array of paths to persist (defaults to all)

Returns: Persistent proxy state

License

MIT License © Hairyf