Nesting slices contextualize setters

[JensOAndersen]

Hi

I've been delving into Zustand over the past week, and I've had a blast figuring out how things are done. I like it a lot so far :)

I'm using Zustand for UI state management, and i'm using nested objects to 'group' settings. I've run into an issue where i want to 'nest' slices, however I'm unable to find anyone who's done something similar, and while I can make slices part of a store, I've not figured out how to make a slice part of another slice without destructuring all the slices like so:

const CreateCombinedKennelDoghouseSlice: StateCreator<KennelSlice & DoghouseSlice> = (...a) => ({
    ...CreateKennelSlice(...a),
    ...CreateDoghouseSlice(...a)
})

However, this unwraps all getters and setters into the same object, which is not what i want.

Current non-working code example looks like so:

interface Dog {
    hasHair: boolean;
}

interface Doghouse {
    dog: Dog
    isPretty: boolean;
}
interface DoghouseActions {
    setDog: (dog: Dog) => void;
    setIsPretty: (isPretty: boolean) => void;
}

interface Kennel {
    doghouse: Doghouse
}

interface KennelActions {
    setDoghouse: (doghouse: Doghouse) => void
}

type KennelSlice = Kennel & KennelActions;
type DoghouseSlice = Doghouse & DoghouseActions;

const CreateDoghouseSlice: StateCreator<DoghouseSlice, [], [], DoghouseSlice> = (set) => {
    return {
        dog: {
            hasHair: true
        },
        isPretty: true,
        setDog: (dog) => set(() => ({dog: dog})),
        setIsPretty: (isPretty) => set(() => ({isPretty: isPretty})) 
    }
}

const CreateKennelSlice: StateCreator<KennelSlice, [],[], KennelSlice> = (...a) => {
    return {
        doghouse: {
            ...CreateDoghouseSlice(...a) //in my mind this should work to destruct the properties of the doghouse slice into this object?
        },
        setDoghouse: (newDoghouse) => a[0](() => ({doghouse: newDoghouse})) //but then, what about the 'set' here, this this OK?
    }
}

export default CreateKennelSlice;

Comment in the last const is where my logic breaks.

However, I'm not sure this is even something I'm supposed to? Because in my mind if I use 'setDogHouse' won't I lose all 'setters' in the doghouse object, as the 'newDogHouse' parameter is of type 'Doghose', which does not contain the setters?

Some input would be greatly appreciated, should i separate this into several stores?, or accept that I have slices being destructured into the root object?

Thanks in advance and have a great weekend!

[dai-shi]

Does #1538 help?

I think it would be nice to have a guide for "namespacing" and recommend some third party libraries. zustand-lens is only the one available? #884 might be something.
cc @dbritto-dev

[dbritto-dev]

@dai-shi yeah, we need a guide for namespacing on slices pattern

[JensOAndersen]

Does #1538 help?

I think it does, it looks like what I need, but I'm a bit confused on the usage. I've tried adapting my code above to the library, and while i get no warnings or compiler errors, it does not work as expected when i try to use the store in a component:

Just to be sure its not an Error 40, i tried using one of the examples from the documentation as well:

example code here:

"use client"

import { lens, withLenses } from "@dhmk/zustand-lens";
import { create } from "zustand";
import styles from "./page.module.css";

type Nested = {
  text: string;
  isOk: boolean;

  toggle: () => void;
};

type Store = {
  id: number;
  name: string;

  nested: Nested;
};
  
// option 1: type whole store
const store1 = create<Store>()(
  withLenses({
      id: 123,
      name: "test",

      nested: lens((set) => ({
          text: "test",
          isOk: true,

          toggle() {
              set((p /* Nested */) => ({ isOk: !p.isOk }));
          },
      })),
  })
);

export default function Home() {
  const {isOk, toggle} = store1(st => {st.nested.isOk, st.nested.toggle})
  return (
    <main className={styles.main}>
      {isOk ? 'pretty' : 'notpretty'}
      <button onClick={(() => toggle())}>swap</button>
    </main>
  );
}

I'm 99% sure i'm Zustand in the same way as I would without Lens, or is lensing only supposed to be used inside of functions where i call GetState()?

[JensOAndersen]

@dai-shi It works when I do array pick, like so:

export default function Home() {  
  const [isPretty, setIspretty] = UseKennelStore((st) => [st.dogHouse.isPretty, st.dogHouse.setIsPretty]);

  return (
    <main className={styles.main}>
      {isPretty ? 'pretty' : 'notpretty'}
      <button onClick={(() => setIspretty(!isPretty))}>swap</button>
    </main>
  );
}

However, I do believe Zustand supports object picking as well: https://github.com/pmndrs/zustand#selecting-multiple-state-slices

Am I doing something wrong as I'm not able to use object picking for accessing the state?

[dbritto-dev]

@JensOAndersen yes, your code is wrong. It's st => ({ isOk: st.nested.isOk, toggle: st.nested.toggle }) instead of st => { st.nested.isOk, st.nested.toggle }. Note: without the parenthesis is just a fn without a return

[JensOAndersen]

Aah - it was an E40 then. Coming from .Net Core there's SO many parentheses to keep track of.

Thank you for your time