How to create a TypeScript wrapper for create + devtools + immer + combine?

[rodrigocfd]

I have a multi-page app which creates multiple stores, and they all follow the same pattern:

import {create} from 'zustand';
import {combine, devtools} from 'zustand/middleware';
import {immer} from 'zustand/middleware/immer';

const useFoo = create(
	devtools(
		immer(
			combine({
				names: [] as string[],
			},
			set => ({
				addName(n: string): void {
					set(state => state.names.push(n));
				},
			})),
		),
		{name: 'Foo'},
	),
);

I'm considering writing a wrapper function to abstract away all the repetitive stuff, something like this:

function createOurStore(name: string, state: ???, actions: ???) {
	return create(
		devtools(
			immer(
				combine(state, actions),
			),
			{name},
		),
	);	
}

So the store above could be written as:

createOurStore('Foo', {
	names: [] as string[],
}, set => ({
	addName(n: string): void {
		set(state => state.names.push(n));
	},
}));

But I'm having a hard time wrapping my head around the TypeScript sorcery involved...

Is such a function possible to be written?

[dai-shi]

I don't think having combine internally works, but you should be able to do the same thing as combine does. Have you checked out the source code?

[rodrigocfd]

Oh now I got it... we're writing our own create function. Thank you very much.

[dai-shi]

On second thought, it should be something like this: https://tsplay.dev/mLrZbw

import { create, StateCreator, StoreMutatorIdentifier } from "zustand";
import { devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

export function createOurStore<T extends object, U extends object>(
  name: string,
  state: T,
  actions: StateCreator<
    U,
    [["zustand/devtools", never], ["zustand/immer", never]],
    [["zustand/immer", never], ["zustand/devtools", never]]
  >,
) {
  return create(
    devtools(
      immer((...a) => Object.assign({}, state, (actions as any)(...a))),
      { name },
    ),
  );
}

[rodrigocfd]

Indeed, this version seems more correct, but something is missing from the typings, apparently:

The return type of createOurStore is being inferred by TypeScript. I tried to copy the generic return type from create, but it didn't work.

[dai-shi]

Here you go: https://tsplay.dev/w1Qg2w

import { create, StateCreator, StoreMutatorIdentifier } from "zustand";
import { devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

export function createOurStore<T extends object, U extends object>(
  name: string,
  state: T,
  actions: StateCreator<
    T,
    [["zustand/devtools", never], ["zustand/immer", never]],
    [["zustand/immer", never], ["zustand/devtools", never]],
    U
  >,
) {
  return create<T & U>()(
    devtools(
      immer((...a) => Object.assign({}, state, (actions as any)(...a))),
      { name },
    ),
  );
}

const useOrigStore =
  // ^?
  create<{
    name: string;
    setName: (name: string) => void;
  }>()(
    devtools(
      immer((set) => ({
        name: "",
        setName: (name) =>
          set((state) => {
            state.name = name;
          }),
      })),
      { name: "foo" },
    ),
  );

const useOurStore =
  // ^?
  createOurStore("foo", { name: "" }, (set) => ({
    setName: (name: string) =>
      set((state) => {
        state.name = name;
      }),
  }));

[rodrigocfd]

I'm truly impressed by your TypeScript supernatural powers.

Your implementation is perfect, thank you very much.

[rodrigocfd]

Now I have to ask this... I've never seen such a construction before:

actions: StateCreator<
    T,
    [["zustand/devtools", never], ["zustand/immer", never]],
    [["zustand/immer", never], ["zustand/devtools", never]],
    U
  >,

How is it possible to use "zustand/devtools" or "zustand/immer" as types? What do they mean? Am I missing some feature of TypeScript?

[dai-shi]

You would need to read this guide deeply:

zustand/docs/guides/typescript.md

Line 213 in 9857a67

## Authoring middlewares and advanced usage

One of the TS features is called "Module Augmentation", but it's not that simple. Read the full story if you are interested: #710 and #725

[rodrigocfd]

Fantastic, thank you.