Typescript + Immer + Slice pattern

[u-rogel]

I would like to use zustand with typescript and immer plus the slice pattern. While it is working as expected, I get a TS error on the action in the slice.

My store with bear slice:

import { create, type StateCreator } from 'zustand'
import { immer } from 'zustand/middleware/immer'

interface BearsSlice {
  bears: number
  add: () => void
}

const useBearSlice: StateCreator<BearsSlice> = (set) => ({
  bears: 0,
  add: () => set(
    (state) => { // <- typescript error, see bellow
      state.bears += 1
    }
  ),
})


const useBoundStore = create(
  immer<BearsSlice>(
    (...a) => ({
      ...useBearSlice(...a),
    })
  )
)

TS error on the action

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

Any idea how to achieve it without the TS error?

[dbritto-dev]

@u-rogel on ts you should use the curried version create<T>()(...)

Solution

create<BearsSlice>()(immer(...))

[u-rogel]

Thanks for the answer. It isn't really solving it. With immer it works in both ways of writing:

export const useBearsStore = create(
  immer<BearsSlice>(
    (set) => ({
      bears: 0,
      add: () => set(
        (state) => {
          state.bears += 1
        }
      ),
    })
  )
)

export const useBearsStore = create<BearsSlice>()(
  immer(
    (set) => ({
      bears: 0,
      add: () => set(
        (state) => {
          state.bears += 1
        }
      ),
    })
  )
)

But it still doesn't help me to have it working in the slice pattern. Is there a way to inform the StateCreator type that immer is used as a middleware?

[dbritto-dev]

@u-rogel here you go https://codesandbox.io/s/zustand-updating-draft-states-and-slice-pattern-basic-demo-3e9zby?file=/src/App.tsx

For immer + Slice Pattern you need to create the next type helper

type ImmerStateCreator<T> = StateCreator<
  T,
  [["zustand/immer", never], never],
  [],
  T
>;

then you can use it like this

const createBearSlice: ImmerStateCreator<BearSlice> = (set) => ({
  bears: 0,
  add: () => set(
    (state) => {
      state.bears += 1
    }
  ),
})

I created a codesandbox example with the code that you need to achieve what you want (immer + slice pattern). BTW, I'll update the immer guide to include it.

Note: you shouldn't prefix your slice creators with use they're just regular functions. Using useBearSlice could cause some issues like breaking the rule of hooks since you are trying to use something that's considered a custom hook like a regular function.

[dbritto-dev]

We intentionally only expose StateCreator and let users define types on their end.
The rationale is ImmerStateCreator is limited. People may use immer and persist middleware at once, for example.
Please improve docs if you can.

Sure, I'll do it

[u-rogel]

@dbritto-dev if you don't mind I would gladly make a pr for it.

[u-rogel]

@dbritto-dev I will open later another QA that might help redux users to migrate. So if uou guys up for it I would gladly help with the docs.

[dbritto-dev]

@u-rogel thanks but I'll work on that I need to add examples for common cases and non-common cases where you can use a custom middleware

[oravecz]

When I paste this example in my IDE and use TypeScript 5, I get the following TS errors:

TS2345: Argument of type  []  is not assignable to parameter of type  string | { type: unknown; } | undefined 

Full code of example

import { create } from "zustand";
import type { StateCreator } from "zustand";
import { immer } from "zustand/middleware/immer";
import * as React from "react";

type Slice = {
  count: number;
  increment: (qty: number) => void;
  decrement: (qty: number) => void;
};

type ImmerStateCreator<T> = StateCreator<
  T,
  [["zustand/immer", never], never],
  [],
  T
>;

const createSlice: ImmerStateCreator<Slice> = (set, get, store) => {
  return {
    count: 0,
    increment: (qty: number) => {
      set( ( state ) => {
        state.count += qty;
      } )
    },
    decrement: (qty: number) => {
      set( ( state ) => {
        state.count -= qty;
      } )
    },
  };
};

const useCountStore = create<Slice>()(
  immer((...args) => ({
    ...createSlice(...args)
  }))
);

export default function App() {
  const { count, increment, decrement } = useCountStore();

  return (
    <div className="App">
      {count} <hr />
      <button type="button" onClick={() => increment(1)}>
        Increment
      </button>{" "}
      <button type="button" onClick={() => decrement(1)}>
        Decrement
      </button>
    </div>
  );
}

[oravecz]

What would this pattern look like if I wanted specific middleware on my Slice (not all of the slices in my store)?

For example, if I wanted to add Zundo middleware to my SpreadsheetSlice?

Another use case would be middleware that takes parameters that are specific to each slice.

[dbritto-dev]

@oravecz no errors -> https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYygUwIYzXAvnAMyghDgCIAvAVwGcYMA7AEzIG4AoUSWOGATzA4kAZXrYAwuizQ8hYqUq16zNp3DR4SUCDRRZREuWp1GTAPQhgTJgBs0Adwzoz23avb9BcYTeDIcALyI7HAoEFQMMABccAxUIABGuhyhwAyoaDqRMQAUAI78MXGJugCUcAEAfHAAbhBWKXBMaBlZ0XD5hbHxSVDlVbX1TBy4HB4COACSIDpQolhokpgw0AA8ACrVQfMSUitQqyFw6wA0RwDa54omzC4zbiexaDW6ALqPDM9vZ6Hn70frdiVMbICAMOgoPZoHx+NAxaazHaLPZrGH+LYdGhoGCPADm2MedGgaH61QQR3QMCoUAYwVCoVBEXaAAYfvS0q00NkOgU+EUemUKmSjvS4FiYDkciZsKS6aL6dK0AA6RmROAAaiCvMaotwpRFeDZoWanO5nT53RKfSFctF4slitl5PlCrEytV8AAtFr+Dr6XqDbg2aN2CGgA

[tcoopman]

@oravecz did you figure out how to apply the specific middleware on 1 slice only?

[dbritto-dev]

FYI, middlewares are not designed to be use on slices but whole store

[tcoopman]

ok, thanks for letting me know

[kbrooks]

I ran into this problem with a store I created with immer middleware and two slices. The problem is that you need to derive the type of the slice function from the overall type of the ImmerStateCreator or whatever the type of the store with mixins you have is. If you just use ImmerStateCreator<SliceState> as the type of your slice, your slice will not be able to call get() to access state outside of that slice (or rather, the types will fail when you do that).

Here is my solution to typing the slice so it still has access to outside state:

// file ~/zustand/types.ts
import { StateCreator, StoreMutatorIdentifier } from 'zustand/vanilla';

import { Store } from '~/zustand/store';

export type ImmerStateCreator<
  T,
  Mps extends [StoreMutatorIdentifier, unknown][] = [],
  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
> = StateCreator<T, [...Mps, ['zustand/immer', never]], Mcs>;

export type MyAppStateCreator = ImmerStateCreator<Store>;

// Defines the type of a function used to create a slice of the store. The
// slice has access to all the store's actions and state, but only returns
// the actions and state necessary for the slice.
export type SliceCreator<TSlice extends keyof Store> = (
  ...params: Parameters<MyAppStateCreator>
) => Pick<ReturnType<MyAppStateCreator>, TSlice>;

// file ~/zustand/store.ts
import {Slice, createSlice} from './slice';

export interface Store extends Slice {
  foo: string;
  setFoo: (input: string): void;
}

export const useStore = create<Store>()(
  immer((set, get, store) => {
    foo: '',
    setFoo: (input) => { set(state => { state.foo = input; }); },
    ...createSlice(set, get, store);
  })
);

// file ~/zustand/slice.ts

export interface Slice {
  bar: string;
  setBar: (input: string): void;
}

export const createSlice: SliceCreator<keyof Slice> = (set, get) => {
  return {
    bar: '',
    setBar: (input) => { 
      const newValue = input + get().foo; // slice has access to the rest of the store 
      set(state => { state.bar = newValue; }); },
  };
}