solid-zustand

🐻 State management in Solid using zustand.

Install

pnpm add zustand solid-zustand

Demo: https://stackblitz.com/edit/vitejs-vite-tcofpc

Example

import create from 'solid-zustand'

interface BearState {
  bears: number
  increase: () => void
}

const useStore = create<BearState>(set => ({
  bears: 0,
  increase: () => set(state => ({ bears: state.bears + 1 }))
}))

function BearCounter() {
  const state = useStore()
  return <h1>{state.bears} around here ...</h1>
}

function Controls() {
  const state = useStore()
  return (
    <>
      <button onClick={state.increase}>one up</button>
      {/* Or */}
      <button onClick={() => useStore.setState((prev) => ({ bears: prev.bears + 1 }))}>
        one up
      </button>
    </>
  )
}

Selecting multiple state slices

Since solid-zustand uses createStore to store updates from zustand, state slices only works on plain objects and arrays (as of v1.4.0).

// Do this
const useStore = create(set => ({
  bears: {
    count: 0,
  }
}));
const bears = useStore(state => state.bears); // <div>{bears.count}</div>

// Don't
const useStore = create(set => ({
  bears: 0
}));
const count = useStore(state => state.bears); // <div>{count}</div> Always 0

Multiple state-picks also works

import shallow from 'zustand/shallow';

// Object pick, either state.bears or state.bulls change
const { bears, bulls } = useStore(
  state => ({ bears: state.bears, bulls: state.bulls }),
  shallow,
);

// Array pick, either state.bears or state.bulls change
const [bears, bulls] = useStore(state => [state.bears, state.bulls], shallow);

License

MIT