tanstack-store-patterns-alphalisted
Install: claude install-skill smicolon/ai-kit
# TanStack Store Patterns (Alpha)
> **Alpha Library**: TanStack Store is in alpha. APIs may change between versions.
This skill covers TanStack Store for framework-agnostic reactive state management.
## Basic Store
```typescript
// lib/stores/counter-store.ts
import { Store } from '@tanstack/store'
export const counterStore = new Store({
count: 0,
})
// Actions
export const increment = () => {
counterStore.setState((state) => ({
...state,
count: state.count + 1,
}))
}
export const decrement = () => {
counterStore.setState((state) => ({
...state,
count: state.count - 1,
}))
}
export const reset = () => {
counterStore.setState((state) => ({
...state,
count: 0,
}))
}
```
## Using Store in React
```typescript
import { useStore } from '@tanstack/react-store'
import { counterStore, increment, decrement, reset } from '@/lib/stores/counter-store'
function Counter() {
const count = useStore(counterStore, (state) => state.count)
return (
<div>
<span>Count: {count}</span>
<button onClick={decrement}>-</button>
<button onClick={increment}>+</button>
<button onClick={reset}>Reset</button>
</div>
)
}
```
## Complex Store with Derived State
```typescript
// lib/stores/cart-store.ts
import { Store } from '@tanstack/store'
interface CartItem {
id: string
name: string
price: number
quantity: number
}
interface CartState {
items: CartItem[]
}
export const cartStore = new Store<CartState>({
i