Describe middleware input and output mutators
Typing custom middleware
Zustand · Type Alias
StoreMutatorIdentifier
StoreMutatorIdentifier is Zustand's type-level identifier for middleware mutators. It appears in mutator tuples that describe how middleware changes a store's type.
How it works
StoreMutatorIdentifier is the identifier type used in Zustand's higher-kinded mutator tuples. Middleware typings use it to describe the mutators a state creator receives or produces, while each identifier is paired with an associated type.
Syntax
type StoreMutatorIdentifier = keyof StoreMutators<unknown, unknown>Returns
A type-level identifier used in [StoreMutatorIdentifier, unknown] mutator tuples.
Key points
- StateCreator generic parameters use mutator lists to describe middleware inputs and outputs.
- Custom mutators connect their identifier to a store extension through module augmentation.
- The StoreMutators interface is the mapping point for defining what a custom identifier adds to a store.
Common mistakes
- A middleware's mutator tuple describes a type-level store mutation; it is not merely a runtime middleware label.
- Custom middleware must encode its store mutation through Zustand's higher-kinded mutator pattern rather than treating the identifier as a standalone string.
Example: Typing a middleware mutator
import type { StoreMutatorIdentifier } from 'zustand'
type Logger = <
T,
Mps extends [StoreMutatorIdentifier, unknown][] = [],
Mcs extends [StoreMutatorIdentifier, unknown][] = [],
>(
f: StateCreator<T, Mps, Mcs>,
name?: string,
) => StateCreator<T, Mps, [['logger', never], ...Mcs]>This type models a middleware that adds a named mutator to a Zustand state creator.
When to use it
Associate an identifier with added store members
Store API augmentation
Track mutator changes across composed state creators
Middleware composition
Interview questions
QWhat does StoreMutatorIdentifier represent in Zustand's middleware typings?
StoreMutatorIdentifier is used as the first element of a mutator tuple, whose second element carries the mutator's associated type. StateCreator uses arrays of these tuples to represent incoming and outgoing middleware mutations.
Follow-up: Why is the second tuple element needed? It lets a middleware carry configuration or another type parameter through the mutator list, so the resulting store API can be augmented precisely.
QHow is StoreMutatorIdentifier used when typing custom middleware?
A custom middleware typically constrains its mutator lists with [StoreMutatorIdentifier, unknown][]. It then prepends its own identifier and associated type to the outgoing list returned by StateCreator.
Follow-up: How is the runtime store augmentation connected to the type declaration? Module augmentation of StoreMutators maps the identifier to the corresponding store shape.
QWhy does Zustand need StoreMutatorIdentifier?
The identifier is part of Zustand's higher-kinded mutator system, which allows middleware to change the type of the store. This lets TypeScript expose middleware-added APIs while preserving generic state and middleware composition.
Follow-up: What should be checked when composing middleware? The input and output mutator lists must be ordered and parameterized consistently with each middleware's StateCreator signature.
Related
StateCreatorMutateStoreApiStoreMutators