Four slice patterns

[dai-shi]

Bare (Bear) Zustand

• No namespacing support

https://tsplay.dev/NaAE6N

import { create, StateCreator } from "zustand";

interface CountSlice {
  count: number;
  incCount: () => void;
  resetCount: () => void;
}

interface TextSlice {
  text: string;
  updateText: (newText: string) => void;
  resetText: () => void;
}

interface SharedSlice {
  reset: () => void;
}

const createCountSlice: StateCreator<CountSlice, [], [], CountSlice> = (
  set,
) => ({
  count: 0,
  incCount: () => set((state) => ({ count: state.count + 1 })),
  resetCount: () => set({ count: 0 }),
});

const createTextSlice: StateCreator<TextSlice, [], [], TextSlice> = (set) => ({
  text: "Hello",
  updateText: (text) => set({ text }),
  resetText: () => set({ text: "Hello" }),
});

const createSharedSlice: StateCreator<
  CountSlice & TextSlice,
  [],
  [],
  SharedSlice
> = (set, get) => ({
  reset: () => {
    get().resetCount();
    get().resetText();
  },
});

const useCounterStore = create<CountSlice & TextSlice & SharedSlice>()(
  (...a) => ({
    ...createCountSlice(...a),
    ...createTextSlice(...a),
    ...createSharedSlice(...a),
  }),
);

Zustand Lens

• Support namespacing

https://tsplay.dev/Wz1GEm

import { create } from "zustand";
import { withLenses, lens } from "@dhmk/zustand-lens";

interface CountSlice {
  value: number;
  inc: () => void;
  reset: () => void;
}

interface TextSlice {
  value: string;
  update: (newText: string) => void;
  reset: () => void;
}

const countSlice = lens<CountSlice>((set) => ({
  value: 0,
  inc: () => set((prev) => ({ value: prev.value + 1 })),
  reset: () => set({ value: 0 }),
}));

const textSlice = lens<TextSlice>((set) => ({
  value: "Hello",
  update: (newText) => set({ value: newText }),
  reset: () => set({ value: "Hello" }),
}));

const useCounterStore = create<{
  count: CountSlice;
  text: TextSlice;
  reset: () => void;
}>(
  withLenses((set, get) => ({
    count: countSlice,
    text: textSlice,
    reset: () => {
      get().count.reset();
      get().text.reset();
    },
  })),
);

Zustand Slices

• No namespacing support (but it has name collision detection)

https://tsplay.dev/mxOkXN

import { create } from "zustand";
import { createSlice, withSlices } from "zustand-slices";

const countSlice = createSlice({
  name: "count",
  value: 0,
  actions: {
    incCount: () => (prev) => prev + 1,
    reset: () => () => 0,
  },
});

const textSlice = createSlice({
  name: "text",
  value: "Hello",
  actions: {
    updateText: (newText: string) => () => newText,
    reset: () => () => "Hello",
  },
});

const useCounterStore = create(withSlices(countSlice, textSlice));

Zustand Valtio

• Support namespacing

https://tsplay.dev/wQdRAW

import { create } from "zustand";
import { withProxy } from "zustand-valtio";

const countSlice = {
  value: 0,
  inc() {
    this.value++;
  },
  reset() {
    this.value = 0;
  },
};

const textSlice = {
  value: "Hello",
  update(newText: string) {
    this.value = newText;
  },
  reset() {
    this.value = "Hello";
  },
};

const useCounterState = create(
  withProxy({
    count: countSlice,
    text: textSlice,
    reset() {
      this.count.reset();
      this.text.reset();
    },
  }),
);

[dai-shi]

Simplified Bear Zustand

https://tsplay.dev/N5YA2N

import { create, StateCreator } from "zustand";

interface CountSlice {
  count: number;
  incCount: () => void;
  resetCount: () => void;
}

interface TextSlice {
  text: string;
  updateText: (newText: string) => void;
  resetText: () => void;
}

interface SharedSlice {
  reset: () => void;
}

const createCountSlice: StateCreator<CountSlice> = (set) => ({
  count: 0,
  incCount: () => set((state) => ({ count: state.count + 1 })),
  resetCount: () => set({ count: 0 }),
});

const createTextSlice: StateCreator<TextSlice> = (set) => ({
  text: "Hello",
  updateText: (text) => set({ text }),
  resetText: () => set({ text: "Hello" }),
});

const useCounterStore = create<CountSlice & TextSlice & SharedSlice>()(
  (set, get, api) => ({
    ...createCountSlice(set, get, api),
    ...createTextSlice(set, get, api),
    reset: () => {
      get().resetCount();
      get().resetText();
    },
  }),
);

[dai-shi]

Poll: https://x.com/dai_shi/status/1812649338654617918

Similar discussion: #2672