Skip to content
Bunshi
GitHub

Zustand

Background

Zustand is a small, fast and scalable bearbones state-management solution using simplified flux principles.

As a flux state store, it shares a lot in common with Redux.

Component state

Bunshi helps you create Zustand stores per component or other scopes, instead of only defined globally.

import { ComponentScope, molecule } from "bunshi";
import { createStore } from 'zustand/vanilla'

export const CountMolecule = molecule((_, scope) => {
  scope(ComponentScope);

  const store = createStore((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
  
  return store;
});
Open on CodeSandboxOpen Sandbox

Global state

You can use Zustand to define a global stores shared across your application.

import { molecule } from "bunshi";
import { createStore } from 'zustand/vanilla'

export const CountMolecule = molecule((_, scope) => {
  const store = createStore((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
  
  return store;
});
Open on CodeSandboxOpen Sandbox

Why Bunshi with Zustand?

Bunshi helps with scoping your stores. It allows you to pull state up and push state down the component tree. If the only type of state you have is global state and it doesn’t need to be lazy, then you can avoid bunshi and use a global zustand store. If you want to use Zustand for more granular purposes, read on.

  • Start using Zustand for component-level state
  • Move your state to global without touching your code
  • Stick to the vanilla JS API for Zustand