Inspect updates
Debugging state transitions during development
Zustand · Function
devtools
The devtools middleware connects a Zustand store to the Redux DevTools Extension without Redux. It supports configuration for connection naming, environment-based enablement, action labels, and action filtering.
How it works
devtools wraps a Zustand state creator and connects its store to the Redux DevTools Extension. It accepts optional DevTools settings such as a connection name, whether integration is enabled, action-type behavior, and action filtering, then returns a state creator with the integration attached.
Syntax
devtools<T>(stateCreatorFn: StateCreator<T, [], []>, devtoolsOptions?: DevtoolsOptions): StateCreator<T, [['zustand/devtools', never]], []>Parameters
| Name | Type | Description |
|---|---|---|
stateCreatorFn | StateCreator<T, [], []> | A function receiving set, get, and store, normally returning the state and actions exposed by the store. |
devtoolsOptions | DevtoolsOptions | Optional Redux DevTools configuration, including name, enabled, anonymousActionType, and actionsDenylist. |
Returns
A state creator function with the Redux DevTools integration attached: StateCreator<T, [['zustand/devtools', never]], []>.
Key points
- It adds Redux DevTools debugging to a Zustand store without introducing Redux itself.
- The middleware takes a state creator and optional options, producing a new state creator.
- Use the
nameoption to identify this store's connection in the DevTools interface. - The
enabledoption controls integration availability and defaults differently by environment. - Action labels use inferred types when possible and otherwise fall back to
anonymous. actionsDenylisthides matching actions from Redux DevTools using one pattern or several.
Common mistakes
- Install
@redux-devtools/extensionbefore importing and using this middleware. - When several stores are connected, select the desired store in Redux DevTools to inspect it.
- Call the store's
cleanupmethod when its DevTools connection should be released.
Example: Connect a store to Redux DevTools
import { create } from 'zustand'
import { devtools } from 'zustand/middleware'
type CounterState = {
count: number
increment: () => void
}
export const useCounterStore = create<CounterState>()(
devtools(
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 }), false, 'counter/increment'),
}),
{ name: 'counter' },
),
)Wrap the state creator with devtools to inspect the store through Redux DevTools and label updates with action names.
When to use it
Time-travel debugging
Replaying state changes while investigating a bug
Name store connections
Managing multiple Zustand stores in one application
Filter actions
Reducing noise in the DevTools action history
Interview questions
QWhat problem does Zustand's devtools middleware solve?
devtools is a middleware that connects a Zustand store to the Redux DevTools Extension without requiring Redux. It wraps a state creator and returns another state creator configured for DevTools integration.
Follow-up: How would you disable the integration in production? Pass enabled: false in the middleware options, or rely on the documented default, which is enabled in development and disabled in production.
QWhat are the arguments accepted by devtools?
The first argument is the state creator: a function receiving set, get, and store, usually returning the store's state and actions. The optional second argument is a DevtoolsOptions object.
Follow-up: How can separate stores be distinguished in Redux DevTools? Give each middleware instance a different name option so its connection has a custom identifier.
QHow can action visibility and action naming be controlled?
The middleware can infer action types, or use anonymous when an action type is unavailable. Its options also include action filtering through actionsDenylist, which accepts a string or an array of regular-expression patterns.
Follow-up: What should be done when a store's lifecycle ends? Invoke its cleanup method to disconnect and release the Redux DevTools connection.
Related
Redux DevTools ExtensionDevtoolsOptionsStateCreatorzustand/middlewarecleanup