Skip to content

Latest commit

 

History

History
107 lines (86 loc) · 3.09 KB

README.md

File metadata and controls

107 lines (86 loc) · 3.09 KB
Raw

zustand-slices

CI npm size discord

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