How to create slices with immer and auto type inference for slice actions?

[robertluedke]

Hello zustand community!

I've already found a suitable way to organize my zustand store especially with immer and combine to infer the types of my initial state and the store actions. My goal is not to have to explicitly create the types for the store actions or some computed get() selectors. So combine was the solution to realize it.

But now I wanna separate this store in some slices and I can't figure out how, because of TypeScript errors which occur through the usage of immer in common and combine in the slice files.

Could please somebody help me with these typescript issues?

Here is a TS Playground of this issue.

The current store without slices:

useExampleStore.ts

interface ExampleState {
    header: {
        title: string;
        subtitle: string | undefined;
    };
}

const initialState: ExampleState = {
    header: {
        title: "",
        subtitle: undefined
    }
};

const useExampleStore = create(
    devtools(
        subscribeWithSelector(
            immer(
                combine(initialState, (set) => ({
                    setHeaderTitle: (title: string) =>
                        set(
                            (state) => {
                                state.header.title = title;
                            },
                            undefined,
                            "Set header title"
                        ),
                    setHeaderSubtitle: (subtitle: string) =>
                        set(
                            (state) => {
                                state.header.subtitle = subtitle;
                            },
                            undefined,
                            "Set header subtitle"
                        )
                }))
            )
        ),
        { store: "ExampleStore" }
    )
);

My slices approach with an example slice looks like this:

useBoundStore.ts

const useBoundStore = create(
    devtools(
        subscribeWithSelector(
            immer((...args) => ({
                ...createExampleSlice(...args)
            }))
        ),
        { store: "ExampleStore" }
    )
);

exampleSlice.ts

interface ExampleState {
    header: {
        title: string;
        subtitle: string | undefined;
    };
}

const initialState: ExampleState = {
    header: {
        title: "",
        subtitle: undefined
    }
};

const createExampleSlice = combine(initialState, (set) => ({
    setHeaderTitle: (title: string) =>
        set((state) => {
            state.header.title = title;
        }),
    setHeaderSubtitle: (subtitle: string) =>
        set((state) => {
            state.header.subtitle = subtitle;
        })
}));

The ts errors:

In the useBoundStore.ts file I get the following ts error at ...createExampleSlice(...args):

Argument of type '() => unknown' is not assignable to parameter of type '() => Write<ExampleState, { setHeaderTitle: (title: string) => void; setHeaderSubtitle: (subtitle: string) => void; }>'.
  Type 'unknown' is not assignable to type 'Write<ExampleState, { setHeaderTitle: (title: string) => void; setHeaderSubtitle: (subtitle: string) => void; }>'.
    Type 'unknown' is not assignable to type 'Omit<ExampleState, "setHeaderTitle" | "setHeaderSubtitle">'.ts(2345)
(parameter) args: [setState: {
    (nextStateOrUpdater: unknown, shouldReplace?: false, action?: Action | undefined): void;
    (nextStateOrUpdater: unknown, shouldReplace: true, action?: Action | undefined): void;
}, getState: () => unknown, store: WithImmer<...>]

In the exampleSlice.ts file I get the following ts error in both (state) => { parts:

Argument of type '(state: ExampleState) => void' is not assignable to parameter of type 'ExampleState | Partial<ExampleState> | ((state: ExampleState) => ExampleState | Partial<ExampleState>)'.
  Type '(state: ExampleState) => void' is not assignable to type '(state: ExampleState) => ExampleState | Partial<ExampleState>'.
    Type 'void' is not assignable to type 'ExampleState | Partial<ExampleState>'.ts(2345)

[mooalot]

I don't think that middleware is allowed in slices. I made zustand-namespaces to allow this sort of stuff.

Or if you didnt want to use that, you would have to use the combine in the root of the store, not the slice.

[robertluedke]

Yeah it seems so.. I read this some minutes ago in another discussion, but maybe someone knows how to solve this.. I want that the types of the computed selectors and actions get inferred, so I don't have to write the types in a duplicated manner. :(

My current solution looks like this: TS Playground

But here I have to explicitly create the types for the actions and computed selectors:

interface ExampleInteractions {
    // Computed selectors
    exampleComputedTitle: string;

    // Actions
    setHeaderTitle: (title: string) => void;
    setHeaderSubtitle: (subtitle: string) => void;
}

export type ExampleSlice = ExampleState & ExampleInteractions;

I think to use combine in the root of the store doesn't solve my ts issues in the slice file..

[mooalot]

Oh I see what you want to do. What about something like this?

interface ExampleState {
      header: {
        title: string;
        subtitle: string | undefined;
      };
    }

  const initialState: ExampleState = {
    header: {
      title: '',
      subtitle: undefined,
    },
  };

  interface ExampleState2 {
    header2: {
      title: string;
      subtitle: string | undefined;
    };
  }
  const initialState2: ExampleState2 = {
    header2: {
      title: '',
      subtitle: undefined,
    },
  };

  function createSlice<T>(
    initializer: StateCreator<
      T,
      [
        ['zustand/devtools', never],
        ['zustand/subscribeWithSelector', never],
        ['zustand/immer', never]
      ],
      []
    >
  ) {
    return initializer;
  }

  const createExampleSlice = createSlice(
    combine(initialState, (set, get) => ({
      exampleComputedTitle: `${get().header.title} (Example)`,
      setHeaderTitle: (title: string) =>
        set(
          (state) => {
            state.header.title = title;
          },
          undefined,
          'Set header title'
        ),
      setHeaderSubtitle: (subtitle: string) =>
        set(
          (state) => {
            state.header.subtitle = subtitle;
          },
          undefined,
          'Set header subtitle'
        ),
    }))
  );

  const createExampleSlice2 = createSlice(
    combine(initialState2, (set, get) => ({
      exampleComputedTitle2: `${get().header2.title} (Example)`,
      setHeaderTitle2: (title: string) =>
        set(
          (state) => {
            state.header2.title = title;
          },
          undefined,
          'Set blah title'
        ),
    }))
  );

  type UnionToIntersection<U> = (
    U extends any ? (arg: U) => void : never
  ) extends (arg: infer I) => void
    ? I
    : never;

  type MergeStates<T extends StateCreator<any>[]> = {
    [K in keyof T]: T[K] extends StateCreator<infer S> ? S : never;
  }[number] extends infer U
    ? UnionToIntersection<U> & object
    : never;

  function sliceMany<S extends StateCreator<any>[]>(
    ...initializers: S
  ): StateCreator<MergeStates<S>> {
    return (...args) => {
      return initializers.reduce(
        (acc, initializer) => ({ ...acc, ...initializer(...args) }),
        {} as MergeStates<S>
      );
    };
  }

  const useBoundStore = create(
    devtools(
      subscribeWithSelector(
        immer(sliceMany(createExampleSlice, createExampleSlice2))
      ),
      {
        store: 'ExampleStore',
      }
    )
  );

Also I changed my mind, I think using combine in a slice is fine because it doesn't really depend on scoped state.

[robertluedke]

Heyho! Thank you very much for your input @mooalot

I just solved the problem without the combine middleware and published an own middleware for this solution: https://github.com/robertluedke/zustand-create-slices

With this middleware I get a well structured store with store slices. Each slice has its own namespace and I do not need to explicit create the types for the actions, just for the pure data state.

Bonus: I did add an automatic action name inference for the developer tools in the format "slice name/function name" like "bear/addBear". (which works with immer middleware and in the Firefox!! Both are issues right now in Zustand itself..)

Now I am totally happy to have this easy api to create slices in Zustand! 😄

Look into the following example implementation:

// useStore.ts
import { create, type StateCreator } from "zustand";
import { createSlices } from "zustand-create-slices";
import { devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
import { type BearSlice, createBearSlice } from "./bear.store";
import { createFishSlice, type FishSlice } from "./fish.store";

export type ExampleStore = {
    bear: BearSlice;
    fish: FishSlice;
};

type StoreSlice<T> = StateCreator<
    ExampleStore,
    [["zustand/devtools", never], ["zustand/immer", never]],
    [],
    T
>;

export type SliceSet<T> = Parameters<StoreSlice<T>>[0];
export type SliceGet<T> = Parameters<StoreSlice<T>>[1];

export const useStore = create<ExampleStore>()(
    devtools(
        immer(
            createSlices({
                bear: createBearSlice,
                fish: createFishSlice
            })
        ),
        { name: "Example Store" }
    )
);

// bear.store.ts
import type { SliceSet, SliceGet } from "./useStore";

interface BearSliceState {
    bears: number;
}

const initialState: BearSliceState = {
    bears: 0
};

export const createBearSlice = (set: SliceSet<BearSliceState>, get: SliceGet<BearSliceState>) => ({
    ...initialState,

    addBear: () =>
        set((state) => {
            state.bear.bears += 1; // Direct mutation with immer
        }),

    eatFish: () =>
        set((state) => {
            state.fish.fishes -= state.bear.bears; // Cross-slice updates
        }),

    getMultipleBears: (n: number) => get().bear.bears * n
});

// Export the inferred store slice type
export type BearSlice = ReturnType<typeof createBearSlice>;