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

[mooalot]

@dai-shi maybe this is a little crazy, but I did what I think is a useful and very scaleable slice pattern in zustand-namespaces.

Here is an example:

import { create } from 'zustand';
import {
  namespaced,
  createNamespace,
  getNamespaceHooks,
} from 'zustand-namespaces';

const namespaceA = createNamespace('namespaceA', () => ({
  dataInNamespaceA: 'data',
}));

const namespaceB = createNamespace('namespaceB', () => ({
  dataInNamespaceB: 'data',
}));

const useStore = create(
  namespaced(
    // Namespaced state is passed as an argument for you to use in your store
    (namespacedState) => () => ({
      mainData: 'data',
      ...namespacedState,
    }),
    {
      namespaces: [namespaceA, namespaceB],
    }
  )
);

export const { namespaceA: useNamespaceA, namespaceB: useNamespaceB } =
  getNamespaceHooks(useStore, namespaceA, namespaceB);

It namespaces data (hence the name), allows for middleware within each slice while still only being one store, and you can have as many levels of nested namespaces as you want.

It has a few more tricks up its sleeve if you read the docs on github

What are your thoughts on this approach?

[dai-shi]

I think it's good. I'm not sure the use cases and the pitfalls of having middleware for each slice. At least, it wasn't the goal for the four patterns. Anyway, it's good have optioins.

[mooalot]

I fully support the single-store approach, and in many cases, I’ve found that each slice required its own specific middleware.

Either way, I’d encourage you to try it out sometime—I think you might find it interesting.