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

npm install zustand zustand-slices

Usage

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>
    </>
  );
};

Examples

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

PORT=8080 pnpm run examples:01_counter

and open http://localhost:8080 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