Typing the `set` method from Zustand store with Immer middleware while keeping autocomplete

889 Views Asked by At

I'm having trouble typing the set method from Zustand store while using Immer middleware. I do need to type it since some properties contain functions that will update the state, so they need the set function:

export const useStore = create<Store>()(
     immer((set, get) => ({
         func: beginDraggingVertex(set, get, vertexID) 
     }))
)     

....

function beginDraggingVertex(set: Setter, get: Getter, vertexID: string) {
  ...ommited
  set((store) => 
   // here is where I do want to have the autocomplete working
   store.whateverProperty = 'hi'
  )

}

If I remove Immer middleware from the store, when I hover the set method I do get its type so I can later type on the beginDraggingVertex declaration args. But with Immer applied, the set method changes and if I change the type of set to the new type, I loose autocomplete.


 //`set` type with Immer applied, with this one I loose autocomplete wihtin:
 type Setter = (
  nextStateOrUpdater:
    | (Store & ActionsObject)
    | Partial<Store & ActionsObject>
    | ((state: WritableDraft<Store & ActionsObject>) => void),
  shouldReplace?: boolean | undefined
) => void

//`set` type without Immer:
 export type Setter = (
  partial:
    | (Store & ActionsObject)
    | Partial<Store & ActionsObject>
    | ((state: Store & ActionsObject) => (Store & ActionsObject) | Partial<Store & ActionsObject>),
  replace?: boolean | undefined
) => void


If I apply Immer and then give set the old type from whenever it was not applied, I of course get autocomplete but I do get this errors both in the set callback:

I was expecting (Store & ActionsObject) | Partial<Store & ActionsObject> | ((state: Store & ActionsObject) => (Store & ActionsObject) | Partial<...>), but you passed (store: Store & ActionsObject) => void

I really appreciate any help you could provide.

0

There are 0 best solutions below