How to type in Typescript the use of immer middleware with v4 createStore

[jonavila]

What's the proper way of using the immer middleware in Typescript if we are using createStore to use React Context?

Example

import { createContext, useContext } from 'react'
import { createStore, useStore } from 'zustand'

const store = createStore(...) // vanilla store without hooks

const StoreContext = createContext()

const App = () => (
  <StoreContext.Provider value={store}>
    ...
  </StoreContext.Provider>
)

[dai-shi]

Is it only an issue with immer?
Can you create a small reproduction with https://www.typescriptlang.org/play ?

In general, it would work like something like this:

import { createContext, useContext } from 'react'
import { createStore, useStore } from 'zustand'

const store = createStore(...) // vanilla store without hooks

const StoreContext = createContext<typeof store | null>(null)

const App = () => (
  <StoreContext.Provider value={store}>
    ...
  </StoreContext.Provider>
)

[jonavila]

@dai-shi I think I may have figure it out. My first instinct was to try to import the WithImmer type but noticed that wasn't available as an export. Here's an example on how I got it to work

import { createStore, useStore } from "zustand";
import { immer } from "zustand/middleware/immer";
import { createContext, FC, useContext } from "react";

interface MyStore {
  counter: number;
  inc: () => void;
}

const intialState = {
  counter: 5
};

const createMyStore = (state: typeof intialState = intialState) => {
  return createStore<MyStore, [["zustand/immer", never]]>(
    immer((set) => ({
      ...state,
      inc: () =>
        set((state) => {
          state.counter++;
        })
    }))
  );
};

const MyStoreContext = createContext<ReturnType<typeof createMyStore> | null>(
  null
);

export const MyStoreProvider: FC<{ counter: number }> = ({
  children,
  ...state
}) => {
  const store = createMyStore(state);

  return (
    <MyStoreContext.Provider value={store}>{children}</MyStoreContext.Provider>
  );
};

export function useMyStore(): MyStore;
export function useMyStore<T>(
  selector: (store: MyStore) => T,
  equalityFn?: (left: T, right: T) => boolean
): T;
export function useMyStore<T>(
  selector?: (store: MyStore) => T,
  equalityFn?: (left: T, right: T) => boolean
) {
  const store = useContext(MyStoreContext);

  if (!store) {
    throw new Error("MyStoreContext is not provided");
  }

  return useStore(store, selector as any, equalityFn);
}

The missing piece was the immer mutator reference (["zustand/immer", never]). I had missed this link
https://docs.pmnd.rs/zustand/guides/typescript#middlewares-and-their-mutators-reference

Codesandbox working example: https://codesandbox.io/s/little-worker-t306nw?file=/src/store.tsx

[dai-shi]

If you don't export context, you can make the context type any.

[robxbob]

Aha, you're absolutely right. A bit unfortunate having the any for this one component though. I have like 5 other components that have similar structures except it doesn't have complex typings like the tsplay example, so it works properly. I'm debating if I should not export context for all, make it any, and define the expected type in the custom hook, OR just have that dummystore for this one case.

[dai-shi]

Hi @robxbob,

Great news! I found a real solution after reading the typescript guide again:

zustand/docs/guides/typescript.md

Lines 340 to 358 in 66f3a02

	### `create` without curried workaround
	The recommended way to use `create` is using the curried workaround like so: `create<T>()(...)`. This is because it enables you to infer the store type. But if for some reason you do not want to use the workaround, you can pass the type parameters like the following. Note that in some cases, this acts as an assertion instead of annotation, so we don't recommend it.
	```ts
	import { create } from "zustand"
	interface BearState {
	bears: number
	increase: (by: number) => void
	}
	const useBearStore = create<
	BearState,
	[
	['zustand/persist', BearState],
	['zustand/devtools', never]
	]
	>(devtools(persist((set) => ({

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

import React from "react";
import { createStore } from "zustand/vanilla";
import { immer } from "zustand/middleware/immer";

export interface AppState<T extends string> {
  names: T[];
  ages: Record<T, string>;
}

type AnyStore = ReturnType<
  typeof createStore<AppState<any>, [["zustand/immer", never]]>
>;

export const AppStoreContext = React.createContext<AnyStore | undefined>(
  undefined,
);

export interface AppStoreProviderProps<T extends string> extends AppState<T> {
  children?: React.ReactNode;
}
export const AppStoreProvider = <T extends string>({
  children,
  ...appState
}: AppStoreProviderProps<T>) => {
  const [store1] = React.useState(() => createStore(immer(() => appState)));
  const [store2] = React.useState(() =>
    createStore<AppState<T>>()(immer(() => appState)),
  );
  const [store3] = React.useState(() =>
    createStore(immer<AppState<T>>(() => appState)),
  );

  return (
    <>
      <AppStoreContext.Provider value={store1}>
        {children}
      </AppStoreContext.Provider>
      <AppStoreContext.Provider value={store2}>
        {children}
      </AppStoreContext.Provider>
      <AppStoreContext.Provider value={store3}>
        {children}
      </AppStoreContext.Provider>
    </>
  );
};

[robxbob]

You shouldn't need [["zustand/immer", never]] unless you are a middleware author. Can anyone create a repro of the issue with TypeScript Playground?

Oh yea! I didn't need to create a dummy store! Nice solution and i get to keep my consistency by adding this one type. I guess for this situation i can ignore the comment from above?

[dai-shi]

Yeah, it's not "middleware" but you are a library author, so you may need it.

[justjish]

Incase you are nesting multiple middlewares....

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

type State = {
  count: number;
  setCount: (newCount: number) => void;
};
// Note that the order you apply the middleware correlates to the order in the type
create<State, [['zustand/devtools', never], ['zustand/immer', never]]>(
  devtools(
    immer((set) => ({
      count: 0,
      setCount: (newCount: number) => set((state) => void (state.count = newCount)),
    })),
  ),
);

[gandhis1]

Am I off base, but this seems like rather clunky syntax for this? So every single mutator we have, we need to surround it in a void? That arguably ruins a lot of the concise expressiveness that immer was supposed to solve in the first place.

[acao]

for anyone going down this road with zustand/perstist, it requires unknown in place of never

[muzhaqi16]

zustand/perstist should be state instead of never

['zustand/persist', State]