solid-zustand

🐻 State management in Solid using zustand.

Install

pnpm add zustand solid-zustand

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

Usage

First create a zustand store (default uses signals)

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 })),
}))

Then bind your components, and that's it!

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

function Controls() {
  const increase = useStore(state => state.increase)
  return <button onClick={increase}>one up</button>
}

If you prefer the underlying reactivity to use Solid stores instead of signals, use the /store subpath export:

import { create } from 'solid-zustand/store'

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

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

Recipes

Fetching everything

const state = useStore()

Selecting multiple state slices

It detects changes with strict-equality (old === new) by default, this is efficient for atomic state picks.

const nuts = useStore(state => state.nuts) // nuts()
const honey = useStore(state => state.honey) // honey()

If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the shallow equality function. That function will then be passed to the equals option of createSignal (if using create):

import shallow from 'zustand/shallow'

// Object pick, either state.nuts or state.honey change
const state = useStore(state => ({ nuts: state.nuts, honey: state.honey }), shallow) // state().nuts, state().honey

// Array pick, either state.nuts or state.honey change
const state = useStore(state => [state.nuts, state.honey], shallow) // state()[0], state()[1]

License

MIT