Separating / merging state using immer middleware + TS

I’d ideally want to use zustand with immer and TS and to be able to extract the actions from the values. How would one combine these two patterns? https://github.com/pmndrs/zustand/issues/211#issuecomment-710782706:

import create from 'zustand'

const createActions = (set) => ({
  setTitle: (title) => set({ title }),
  toggle: () => set(prev => ({ done: !prev.done })),
})

const useStore = create((set) => ({
  title: 'foo',
  done: false,
  ...createActions(set),
}))

https://github.com/pmndrs/zustand/pull/169#issuecomment-687770407:

const immer = <T extends State>(
  config: StateCreator<T, (fn: (state: T) => void) => void>
): StateCreator<T> => (set, get, api) =>
  config((fn) => set(produce(fn) as (state: T) => T), get, api);

const useStore = create<{
  bees: boolean;
  setBees: (b: boolean) => void;
}>(
  immer((set) => ({
    bees: false,
    setBees: (input) =>
      set((state) => {
        state.bees = input;
      })
  }))
);

[ivancuric]

A follow-up:

https://codesandbox.io/s/zustand-array-tdtph?file=/src/App.tsx

Casting in the producer works, but I kinda feel I’m breaking stuff here:

 ...createActions(set as SetState<Store>)

The inferred type of set here is actually:

(fn: (draft: WritableDraft<Store>) => void) => void;

[dai-shi]

Closing this. For namespacing, track the issue in #178.