zustand/docs/guides/practice-with-no-store-actions.md
zc627788 df38aa8c5a
Fix document details (#1752)
export const useBoundStore = create((set) => ({
  count: 0,
  text: 'hello',
  inc: () => set((state) => ({ count: state.count + 1 })),
  setText: (text) => set({ text }),
})

example on this page is missing a trailing parenthesis
2023-04-17 11:01:56 +09:00

1009 B

title nav
Practice with no store actions 7

The recommended usage is to colocate actions and states within the store (let your actions be located together with your state).

For example:

export const useBoundStore = create((set) => ({
  count: 0,
  text: 'hello',
  inc: () => set((state) => ({ count: state.count + 1 })),
  setText: (text) => set({ text }),
}))

This creates a self-contained store with data and actions together.


An alternative approach is to define actions at module level, external to the store.

export const useBoundStore = create(() => ({
  count: 0,
  text: 'hello',
}))

export const inc = () =>
  useBoundStore.setState((state) => ({ count: state.count + 1 }))

export const setText = (text) => useBoundStore.setState({ text })

This has a few advantages:

  • It doesn't require a hook to call an action;
  • It facilitates code splitting.

While this pattern doesn't offer any downsides, some may prefer colocating due to its encapsulated nature.