When using Zustand, it’s recommended to use selectors when accessing properties or actions from the store:
const bears = useBearStore((state) => state.bears)
Implementation
Create the createSelectors function
This helper function adds auto-generated selectors to your store:import { StoreApi, UseBoundStore } from 'zustand'
type WithSelectors<S> = S extends { getState: () => infer T }
? S & { use: { [K in keyof T]: () => T[K] } }
: never
const createSelectors = <S extends UseBoundStore<StoreApi<object>>>(
_store: S,
) => {
const store = _store as WithSelectors<typeof _store>
store.use = {}
for (const k of Object.keys(store.getState())) {
;(store.use as any)[k] = () => store((s) => s[k as keyof typeof s])
}
return store
}
Create your base store
Define your store as usual:interface BearState {
bears: number
increase: (by: number) => void
increment: () => void
}
const useBearStoreBase = create<BearState>()((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
increment: () => set((state) => ({ bears: state.bears + 1 })),
}))
Apply createSelectors to your store
Wrap your store with the helper function:const useBearStore = createSelectors(useBearStoreBase)
Use auto-generated selectors
Access properties and actions directly:// Get the property
const bears = useBearStore.use.bears()
// Get the action
const increment = useBearStore.use.increment()
Comparison
import { create } from 'zustand'
const useBearStore = create<BearState>()((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
increment: () => set((state) => ({ bears: state.bears + 1 })),
}))
function MyComponent() {
const bears = useBearStore((state) => state.bears)
const increment = useBearStore((state) => state.increment)
// ... repetitive selector code
}
Vanilla Store Version
If you’re using a vanilla store (created with createStore), use this version of createSelectors:
import { StoreApi, useStore } from 'zustand'
type WithSelectors<S> = S extends { getState: () => infer T }
? S & { use: { [K in keyof T]: () => T[K] } }
: never
const createSelectors = <S extends StoreApi<object>>(_store: S) => {
const store = _store as WithSelectors<typeof _store>
store.use = {}
for (const k of Object.keys(store.getState())) {
;(store.use as any)[k] = () =>
useStore(_store, (s) => s[k as keyof typeof s])
}
return store
}
Usage with Vanilla Stores
Create the vanilla store
import { createStore } from 'zustand'
interface BearState {
bears: number
increase: (by: number) => void
increment: () => void
}
const store = createStore<BearState>()((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
increment: () => set((state) => ({ bears: state.bears + 1 })),
}))
Apply createSelectors
const useBearStore = createSelectors(store)
Use in components
// Get the property
const bears = useBearStore.use.bears()
// Get the action
const increment = useBearStore.use.increment()
Live Example
Code Sandbox Demo
See a working example of auto-generated selectors in action
Third-party Libraries
Several libraries provide similar functionality with additional features:
auto-zustand-selectors-hook
Automatically generate hooks for Zustand selectors
react-hooks-global-state
Simple global state management with React Hooks
zustood
Modular store factory with auto-generated selectors
@davstack/store
Type-safe store with built-in selectors
Auto-generated selectors are particularly useful in large applications where you frequently access multiple store properties across many components.