How to create slices with immer and combine middlewares?

[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.