Store

Mutable store class for managing reactive state

Class Overview

class Store<T> {
  constructor(initialValue: T)
  get state(): T
  get(): T
  setState(updater: (prev: T) => T): void
  subscribe(observerOrFn: Observer<T> | ((value: T) => void)): Subscription
}

The Store class is a mutable reactive container that holds state and notifies subscribers when the state changes. It’s created by calling createStore() with an initial value.

Constructor

initialValue · T · required

The initial value to store. Can be any type.

Properties

state

get state(): T

Gets the current state value.

state · T

The current state stored in the store.

Methods

get()

get(): T

Gets the current state value. This is an alias for the state property.

return · T

The current state stored in the store.

setState()

setState(updater: (prev: T) => T): void

Updates the state. The updater function receives the previous state and should return the new state.

updater · (prev: T) => T · required

A function that receives the previous state and returns the new state.

• prev - The current state value

Always use functional updates with setState() to ensure you’re working with the latest state value.

subscribe()

subscribe(observerOrFn: Observer<T> | ((value: T) => void)): Subscription

Subscribes to state changes. The callback is invoked whenever the state changes.

observerOrFn · Observer<T> | ((value: T) => void) · required

Either a callback function that receives the new state, or an observer object with next, error, and complete methods.

Subscription · { unsubscribe: () => void }

A subscription object with an unsubscribe() method to stop receiving updates.

Examples

Basic Usage

import { createStore } from '@tanstack/store'

const store = createStore(0)

// Get the current state
console.log(store.state) // 0
console.log(store.get()) // 0 (same as store.state)

// Update the state
store.setState((prev) => prev + 1)
console.log(store.state) // 1

Managing Object State

import { createStore } from '@tanstack/store'

interface User {
  name: string
  age: number
  email: string
}

const userStore = createStore<User>({
  name: 'John Doe',
  age: 30,
  email: '[e-mail]'
})

// Update a single property
userStore.setState((prev) => ({
  ...prev,
  age: prev.age + 1
}))

// Update multiple properties
userStore.setState((prev) => ({
  ...prev,
  name: 'Jane Doe',
  email: '[e-mail]'
}))

Subscribing to Changes

import { createStore } from '@tanstack/store'

const store = createStore({ count: 0 })

// Subscribe with a function
const subscription = store.subscribe((state) => {
  console.log('Count is now:', state.count)
})

// Update the state
store.setState((prev) => ({ count: prev.count + 1 }))
// Logs: Count is now: 1

// Unsubscribe when done
subscription.unsubscribe()

Using Observer Pattern

import { createStore } from '@tanstack/store'
import type { Observer } from '@tanstack/store'

const store = createStore(0)

const observer: Observer<number> = {
  next: (value) => console.log('Next value:', value),
  error: (err) => console.error('Error:', err),
  complete: () => console.log('Complete')
}

const subscription = store.subscribe(observer)

store.setState((prev) => prev + 1)
// Logs: Next value: 1

subscription.unsubscribe()

Array State Management

import { createStore } from '@tanstack/store'

const todosStore = createStore<string[]>([])

// Add item
todosStore.setState((prev) => [...prev, 'New todo'])

// Remove item
todosStore.setState((prev) => prev.filter((_, i) => i !== 0))

// Update item
todosStore.setState((prev) => 
  prev.map((todo, i) => i === 0 ? 'Updated todo' : todo)
)

Conditional Updates

import { createStore } from '@tanstack/store'

const counterStore = createStore(0)

// Only update if value is less than 10
counterStore.setState((prev) => {
  if (prev < 10) {
    return prev + 1
  }
  return prev // No change
})

Related APIs

• createStore - Factory function to create stores
• ReadonlyStore - Read-only variant without setState
• Atom - Lower-level reactive primitive
• batch - Batch multiple updates together