zustand-slices


A slice utility for Zustand

Motivation

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.

Install

``bash
npm install zustand zustand-slices
`

Usage

`jsx
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 (
<>



Count: {count}

+1



updateText(e.target.value)} />

Reset

);
};
`

Examples

The examples folder contains working examples.
You can run one of them with

`bash
PORT=8080 pnpm run examples:01_counter
``

and open in your web browser.

You can also try them directly:
01
02
03
04

Tweets

- 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