Infer state and action types without an interface
TypeScript stores
Zustand · Function
combine
Zustand's combine middleware merges an initial state with a creator for additional state and actions. It automatically infers the resulting store types, avoiding an explicit state definition in common TypeScript usage.
How it works
combine takes an initial state value and a creator for additional state and actions, then returns a state creator whose resulting type merges both parts. The middleware is useful when you want TypeScript to infer the store shape without declaring an explicit state interface.
Syntax
combine<T extends object, U extends object>(initialState: T, additionalStateCreatorFn: StateCreator<T, [], [], U>): StateCreator<Omit<T, keyof U> & U, [], []>Parameters
| Name | Type | Description |
|---|---|---|
initialState | T extends object | Initial state value; it may be any type except a function. |
additionalStateCreatorFn | StateCreator<T, [], [], U> | Creator receiving set, get, and store, usually returning additional state and actions. |
Returns
A state creator function with the combined shape Omit<T, keyof U> & U.
Key points
- It joins a predefined initial state with a second creator that contributes more state and actions.
- TypeScript can infer the resulting store shape, reducing the need for an explicit state type.
- The first parameter defines the value present when the store starts.
- The additional creator can use Zustand's set, get, and store arguments to construct the extra portion.
- A common pattern is returning action methods from the additional creator.
- The result is passed to a store-creation API such as create or createStore.
Common mistakes
- Using combine trades some type-safety for the convenience of inferred state, so use it deliberately when that trade-off is acceptable.
- Do not use Zustand's curried create form with combine; because combine creates the state, its types can already be inferred.
Example: Infer state and action types with combine
import { create } from 'zustand'
import { combine } from 'zustand/middleware'
const usePositionStore = create(
combine({ position: { x: 0, y: 0 } }, (set) => ({
setPosition: (position: { x: number; y: number }) => set({ position }),
})),
)
usePositionStore.getState().setPosition({ x: 10, y: 20 })
console.log(usePositionStore.getState().position)Creates a React store whose initial position and update action are inferred from the two arguments.
When to use it
Create a hook store with initial values and update methods
React applications
Build a typed store with createStore
Vanilla Zustand
Interview questions
QWhat problem does combine solve?
combine accepts an initial state and an additional state creator, then returns a state creator whose type combines the initial and added properties. This lets TypeScript infer state and action types without an explicit interface.
Follow-up: Why can the curried create form be omitted here? Because combine itself creates the state shape, so the resulting type is inferable.
QWhat are combine's arguments?
The first argument supplies the initial state. The second receives set, get, and store, and normally returns the actions or other state properties to expose.
Follow-up: What restriction applies to the initial state? It may be any value except a function.
QHow is combine used with Zustand store creation?
Import combine from zustand/middleware and pass it to create or createStore. The returned state creator can then be used to build either a React hook store or a vanilla store.
Follow-up: How does the middleware affect mutator typing? The reference lists combine as having no mutator because it does not mutate the store.
Related
createcreateStorezustand/middlewaresetgetstore