A slice utility for Zustand
Zustand is a very minimal global state library. It's not designed with slice patterns. But as it's flexible and unopinionated, users invented some slice patterns. One of which is described in the official Zustand documentation. However, it's very tricky if you were to use it with TypeScript.
This library provides an opinionated way for a slice pattern. It's designed to be TypeScript friendly.
npm install zustand zustand-slices
import { create } from 'zustand';
import { createSlice, withSlices } from 'zustand-slices';
const countSlice = createSlice({
name: 'count',
value: 0,
actions: {
inc: () => (prev) => prev + 1,
reset: () => () => 0,
},
});
const textSlice = createSlice({
name: 'text',
value: 'Hello',
actions: {
updateText: (newText: string) => () => newText,
reset: () => () => 'Hello',
},
});
const useCountStore = create(withSlices(countSlice, textSlice));
const Counter = () => {
const count = useCountStore((state) => state.count);
const text = useCountStore((state) => state.text);
const { inc, updateText, reset } = useCountStore.getState();
return (
<>
<p>
Count: {count}
<button type="button" onClick={inc}>
+1
</button>
</p>
<p>
<input value={text} onChange={(e) => updateText(e.target.value)} />
</p>
<p>
<button type="button" onClick={reset}>
Reset
</button>
</p>
</>
);
};
The examples folder contains working examples. You can run one of them with
PORT=8080 pnpm run examples:01_counter
and open https://localhost:8080 in your web browser.
You can also try them directly: 01 02 03 04
- https://twitter.com/dai_shi/status/1780623600766320785
- https://twitter.com/dai_shi/status/1780804319761268820
- https://twitter.com/dai_shi/status/1780955525292982285
- https://twitter.com/dai_shi/status/1781106942724993372
- https://twitter.com/dai_shi/status/1785504766254297436
- https://twitter.com/dai_shi/status/1786568001044750693
- https://x.com/dai_shi/status/1811204918512067047