Built a more scalable slice pattern (Divisions)

[mooalot]

The recommended slice pattern didn't sit well with me, so I came up with what I call Zustand Divisions. Only one store needed. It works for my use-cases. Oh and it's typed yay.

Im open to discussion or feedback.

import { create } from 'zustand';
import {
  Divide,
  createDivision,
  divisionHooks,
  divide,
} from 'zustand-divisions';

type Division1 = {
  dataInDivision1: string;
};

type Division2 = {
  dataInDivision2: string;
};

const createDivision1 = createDivision<Division1>()(() => ({
  prefix: 'division1',
  creator: () => ({
    dataInDivision1: 'data',
  }),
}));

const createDivision2 = createDivision<Division2>()(() => ({
  prefix: 'division2',
  creator: () => ({
    dataInDivision2: 'data',
  }),
}));

const divisions = [createDivision1(), createDivision2()] as const;

type AppState = Divide<typeof divisions>;

const useStore = create<AppState>(divide((set, get) => ({}), divisions));

export const [useDivision1, useDivision2] = divisionHooks(
  useStore,
  ...divisions
);

// useStore has all the divisions, but they are prefixed
useStore((state) => state.division1_dataInDivision1);
useStore((state) => state.division2_dataInDivision2);
useStore.getState;
useStore.setState;

// useDivision1 and useDivision2 are the hooks for the divisions. They are self-contained and do not require prefixes
useDivision1((state) => state.dataInDivision1);
useDivision1.getState;
useDivision1.setState;
useDivision2((state) => state.dataInDivision2);
useDivision2.getState;
useDivision2.setState;

[dbritto-dev]

@mooalot I encourage you to give it a shot to zustand-slices

[dbritto-dev]

@mooalot would you mind sharing us a bit more about those limitations you ran into? btw, I'm not sure if slice isolation is something good due to slices are supposed to be not isolated if you need a slice to be isolated then you are talking about multiple stores

[mooalot]

@dbritto-dev the limitations I've found with existing slice patterns are (and correct me if I'm wrong):

• Keys must be unique across slices
• Nested objects don't work well with many 3rd party libraries (zundo, persist, etc.)
• Using slices can be confusing on a large scale, due to the single hook and mixed states (especially if using a flattened structure to accommodate 3rd party libraries)

These are the ones I could think of off the top of my head.

Also sorry, I may have misspoke. Slice isolation as needed. If you look at the last 10-15 or so lines of my zustand-divisions example I posted, you can see what I mean.

[dbritto-dev]

@dai-shi as far as I know zustand-slices handle that, right?

[dai-shi]

It feels like zustand-divisions is based on a different mental model. It looks like multiple stores combined into one.

[mooalot]

@dai-shi That is essentially correct. The store has a flattened structure to eliminate unwanted nested data, which works great for things like partializing!

I thought it would be worth a little "show and tell", to hear people's thoughts.