Typed test snapshots
A test needs a strongly typed store snapshot.
Zustand · Type Alias
ExtractState
ExtractState derives a Zustand store’s complete state-and-actions type for reuse. It avoids manually redefining the store type in tests, utilities, or component props.
How it works
ExtractState derives the complete state-and-actions type from a Zustand store, so the type can be reused without manually duplicating the store shape.
Syntax
ExtractState<typeof store>Parameters
| Name | Type | Description |
|---|---|---|
Store | typeof useBearStore | The Zustand store whose complete state-and-actions type should be extracted. |
Returns
The full inferred type of the supplied store's state and actions.
Key points
ExtractStateis provided by Zustand as a built-in TypeScript utility.- The result covers the store's complete state shape together with its actions.
- You can reuse the inferred type instead of maintaining a duplicate declaration.
- Typical consumers include tests, reusable utilities, and React component properties.
- Apply the helper to the store value to obtain the type for the entire store.
Common mistakes
- Use
ExtractStatewhen the inferred store type is needed outside the declaration where the state is created.
Example: Extract a store's complete type
import { create, type ExtractState } from 'zustand'
export const useBearStore = create((set) => ({
bears: 3,
food: 'honey',
increase: (by: number) => set((state) => ({ bears: state.bears + by })),
}))
export type BearState = ExtractState<typeof useBearStore>
const snapshot: BearState = useBearStore.getState()
console.log(snapshot.bears)The extracted type can describe a snapshot returned by the store's getState method.
When to use it
Reusable utilities
A utility function accepts or transforms store data.
Typed component props
A component property should match the store shape.
Interview questions
QWhat does ExtractState provide?
ExtractState is a Zustand TypeScript helper that derives the full type associated with a store. With ExtractState<typeof useBearStore>, the resulting type includes both state fields and action functions.
Follow-up: How can the derived type be used outside React? Use it for utility functions, component props, or typed snapshots obtained from the store API.
QHow is ExtractState normally applied?
Pass the store value's type with typeof, rather than manually recreating the state interface: ExtractState<typeof useBearStore>. This keeps consumers aligned with the store declaration.
Follow-up: What problem does this avoid? It prevents a separately maintained type from drifting away from the actual store state and actions.
QWhere is extracting a store type useful?
The helper is useful when state typing must be reused outside the original state declaration. The documentation specifically presents tests, utility functions, and component props as use cases.
Follow-up: How would a test use it? Type a snapshot variable as the extracted type before assigning useBearStore.getState().
Related
createuseStoregetStateExtracting Types