Typed store construction
Define a typed store with state fields and action methods before passing it to create.
Zustand · Type Alias
StateCreator
StateCreator is the function type for defining Zustand store state and actions. It receives set, get, and store utilities and returns the state shape exposed by the store.
How it works
StateCreator is the type used for a Zustand store-creation function. The function receives set, get, and store utilities, then normally returns the state fields and actions that the store exposes; middleware can specialize the creator's mutator tuple.
Syntax
StateCreator<T, Mis, Mos, U = T>Parameters
| Name | Type | Description |
|---|---|---|
stateCreatorFn | StateCreator<T, [], []> | The store creator function; it receives set, get, and store and usually returns the exposed state and methods. |
Returns
A state creator function when used as the function type accepted by Zustand APIs; when passed to create, it produces a bound store hook with StoreApi utilities.
Key points
- The creator callback receives Zustand's set, get, and store utilities.
- Its normal result is the state object containing the values and methods consumers should access.
- A plain creator passed to create is commonly typed as StateCreator<T, [], []>.
- Using the creator with create produces a React hook with attached store APIs.
Common mistakes
- Do not invoke the supplied store utilities while the creator is initializing; call them later from actions or other post-creation code.
Example: Typing a store creator
import { create } from 'zustand'
import type { StateCreator } from 'zustand'
type CounterState = {
count: number
increment: () => void
}
const counterCreator: StateCreator<CounterState> = (set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
})
const useCounter = create(counterCreator)
useCounter.getState().increment()
console.log(useCounter.getState().count)StateCreator types the function that supplies a store's state and actions; the creator receives Zustand's store utilities and returns the exposed state object.
When to use it
Middleware composition
Provide a creator to middleware such as persist, devtools, immer, or subscribeWithSelector.
Reusable store slices
Extract reusable state-and-action slices that can be combined into larger Zustand stores.
Interview questions
QWhat does StateCreator represent?
StateCreator describes a function that receives set, get, and store, and usually returns the state and methods exposed by the store. It is commonly supplied to create or a middleware wrapper.
Follow-up: How can middleware affect the type? Middleware can change the creator's mutator tuple, so the resulting StateCreator type may record middleware-specific mutators.
QWhat information does its generic type carry?
The first generic describes the store state. The remaining generic parameters describe mutators applied before and after the creator, while an optional fourth generic describes the returned slice or object shape.
Follow-up: Why can a middleware-wrapped creator have a different type? Its middleware augments or transforms the mutator tuples, allowing the resulting store API to reflect those additions.
QHow is a StateCreator used in a store?
A creator should return an object containing the state values and actions to expose. The set function can update state directly or from the previous state, while get and store provide access to store data and APIs.
Follow-up: When is synchronous access unsafe? During initialization, set, get, and store must not be called synchronously; defer such calls until an action runs after creation.
Related
createcreateWithEqualityFnpersistdevtoolsimmersubscribeWithSelector