Non-component updates
A utility, service, or event handler needs to change Zustand state outside a React component.
Zustand · Const
action creators
Zustand action creators are functions that update a store, either colocated with state or exported separately at module level. External creators can be called without a hook and can facilitate code splitting.
How it works
Action creators can be colocated with a Zustand store or defined externally as exported functions. External creators call the store's setState API, allowing updates without requiring a React hook and supporting code splitting.
Syntax
const action = (...args) => useBoundStore.setState(update)Key points
- Zustand recommends keeping actions and state together in the store by default.
- A valid alternative is to export action functions separately from the store definition.
- External actions can be called from code that does not use a React hook.
- Separating actions into module-level exports can make code splitting easier.
- Colocated actions produce a store that packages its data and behavior together.
Common mistakes
- External action creators are convenient, but colocating actions with state keeps the store encapsulated and self-contained.
Example: Module-level action creators
export const useBoundStore = create(() => ({
count: 0,
text: 'hello',
}))
export const inc = () =>
useBoundStore.setState((state) => ({ count: state.count + 1 }))
export const setText = (text: string) =>
useBoundStore.setState({ text })The store holds state while exported functions update it through the store API, so callers can invoke actions without using a hook.
When to use it
Code-split actions
A large application wants independently loadable update functions.
Encapsulated store behavior
A store should expose its state transitions together with its data.
Interview questions
QWhat is a module-level action creator in Zustand?
An action creator is an exported function that performs a store update, commonly by calling useBoundStore.setState. It can be invoked without a hook, unlike an action called through a component subscription.
Follow-up: When is this pattern especially useful? It is useful when actions should be callable outside React components and when code splitting is desirable.
QHow do external action creators update state?
The store can contain only state, while separate functions update it with setState. This separates the update functions from the state definition while retaining the same store instance.
Follow-up: How would you update from the current value? Pass an updater function to setState, such as state => ({ count: state.count + 1 }).
QWhy might a team choose external action creators?
The documented alternative has two stated advantages: a hook is not required to call an action, and code splitting is facilitated. The trade-off is that colocated actions may feel more encapsulated.
Follow-up: What design choice does the documentation recommend? It recommends colocating actions and state, while presenting module-level functions as a valid alternative.
Related
createsetStatePractice with no store actions