StateCreator extends error

[see7788]

import { create, StateCreator } from "zustand"
import { Store1, type Store1_t } from "./appStore"
import { subscribeWithSelector } from "zustand/middleware"
import { immer } from "zustand/middleware/immer"
interface Store2_t {
rootDrawer: {
open?: boolean,
openSet: () => void
}
}
interface Store_t extends Store2_t, Store1_t { }
const Store2: StateCreator<Store_t, [["zustand/immer", never]], [], Store2_t> = (set, get) => {
return {
rootDrawer: {
openSet: () => set(s => {
s.rootDrawer.open = !s.rootDrawer.open
})
}
}
}
/**

• 类型“{ (nextStateOrUpdater: Store_t | Partial<Store_t> | ((state: WritableDraft<Store_t>) => void), shouldReplace?: false | undefined): void; (nextStateOrUpdater: Store_t | ((state: WritableDraft<...>) => void), shouldReplace: true): void; }”的参数不能赋给类型“{ (nextStateOrUpdater: Store1_t | Partial<Store1_t> | ((state: WritableDraft<Store1_t>) => void), shouldReplace?: false | undefined): void; (nextStateOrUpdater: Store1_t | ((state: WritableDraft<...>) => void), shouldReplace: true): void; }”的参数。
  参数“nextStateOrUpdater”和“nextStateOrUpdater” 的类型不兼容。
  不能将类型“Store1_t | ((state: WritableDraft<Store1_t>) => void)”分配给类型“Store_t | ((state: WritableDraft<Store_t>) => void)”。
  不能将类型“Store1_t”分配给类型“Store_t | ((state: WritableDraft<Store_t>) => void)”。
  类型 "Store1_t" 中缺少属性 "rootDrawer"，但类型 "Store_t" 中需要该属性。ts(2345)
  remoteStore.tsx(6, 5): 在此处声明了 "rootDrawer"。
  */
  const webStore = create<Store_t>()(subscribeWithSelector(immer((...s) => {
  return {
  ...Store1(...s),
  ...Store2(...s)
  }
  })))
  export default webStore

[see7788]

Feature Request: Add built-in StorePick type (to address missing Mutate type)

Problem

Currently, zustand does not provide an official Mutate type, which is a foundational utility for modifying/extending store types (especially when using middlewares to enhance stores).

Due to the lack of Mutate, developers have to manually implement type picking logic for stores (e.g., extracting only specific properties from a full store type while preserving middleware-related type mutations), which is error-prone and inconsistent across projects.

Proposed Solution

Add a built-in StorePick type that leverages (or internally implements) the Mutate logic to safely pick specific properties from a store type, while accounting for any type mutations introduced by middlewares.

The expected signature and usage would be:

// Expected type definition (simplified)
type StorePick<Store, Keys extends keyof Store> = Mutate<Store, Pick<Store, Keys>>;

// Usage example
type MyFullStore = UseBoundStore<StoreApi<{ count: number; name: string; action: () => void }>>;
// Pick only "count" and "name" while preserving middleware mutations
type PickedStore = StorePick<MyFullStore, 'count' | 'name'>;

[qtaghdi]

When using the slice pattern with immer middleware, you'll hit a type error if each slice's StateCreator uses its own type as the first generic.

The error maybe looks like: "Type Store1_t is missing property rootDrawer, but type Store_t requires it"

This happens because set only knows about WritableDraft<Store1_t>, but the actual merged store passes WritableDraft<Store_t>.

The fix is to set the first generic to the full combined store type, and keep the fourth generic as the slice type to constrain the return value:

// before (error)
const Store1: StateCreator<Store1_t, [["zustand/immer", never]], [], Store1_t>
 
// after (works)
const Store1: StateCreator<Store_t, [["zustand/immer", never]], [], Store1_t>

StateCreator<FullStoreType, Middlewares, [], SliceType> already handles this — the first generic tells set/get about the full store shape, and the fourth constrains what the slice actually returns. No custom Mutate or StorePick utility type needed.

Full example:

import { create, StateCreator } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
 
interface AppSliceType {
  count: number;
  increment: () => void;
}
 
interface DrawerSliceType {
  drawer: {
    open?: boolean;
    toggle: () => void;
  };
}
 
interface StoreType extends AppSliceType, DrawerSliceType {}
 
const createAppSlice: StateCreator<
  StoreType,
  [["zustand/immer", never]],
  [],
  AppSliceType
> = (set) => ({
  count: 0,
  increment: () => set((state) => { state.count += 1; }),
});
 
const createDrawerSlice: StateCreator<
  StoreType,
  [["zustand/immer", never]],
  [],
  DrawerSliceType
> = (set) => ({
  drawer: {
    toggle: () => set((state) => { state.drawer.open = !state.drawer.open; }),
  },
});
 
const useStore = create<StoreType>()(
  subscribeWithSelector(
    immer((...args) => ({
      ...createAppSlice(...args),
      ...createDrawerSlice(...args),
    }))
  )
);

[qtaghdi]

when you write the code plz use markdown code blocks.. this discussion is too hard to read and understand to me..