solid-zustand
Install
pnpm add zustand solid-zustandDemo: https://codesandbox.io/s/solid-zustand-demo-dmt4r
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 0Multiple 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