auto-generating selectors

The guide presents a createSelectors helper that augments a Zustand store with a use object. It iterates over the keys returned by getState() and assigns a selector function for each key; the resulting store exposes typed property and action selectors such as .use.bears() and .use.increment().

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
}

import { create } from 'zustand'

type BearState = {
  bears: number
  increment: () => void
}

const createSelectors = <S extends { getState: () => object; (selector: (state: any) => any): any }>(store: S) => {
  const typedStore = store as S & { use: { [K in keyof ReturnType<S['getState']>]: () => ReturnType<S['getState']>[K] } }
  typedStore.use = {} as typeof typedStore.use
  for (const key of Object.keys(store.getState())) {
    ;(typedStore.use as any)[key] = () => store((state: any) => state[key])
  }
  return typedStore
}

const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increment: () => set((state) => ({ bears: state.bears + 1 })),
}))

const useBearStoreWithSelectors = createSelectors(useBearStore)
const bears = useBearStoreWithSelectors.use.bears()
useBearStoreWithSelectors.use.increment()

Creates a typed use object whose properties are generated from the store's current state keys. Each generated function selects one property, so components can call selectors such as use.bears() or use.increment().