How to use devtools middleware with typescript

[MatteoGauthier]

Hey I wanted to try out devtools middleware but I got some TS errors.

type UseStoreState = typeof initializeStore extends (...args: never) => UseBoundStore<infer T> ? T : never


///

const zustandContext = createContext<UseStoreState>()
export const ZustandProvider = zustandContext.Provider
export const useStore = zustandContext.useStore

export const initializeStore = (preloadedState = {}) => {
  return create<InitialState>(
    // Error here
    devtools(
      combine({ ...initialState, ...preloadedState }, (set, get) => ({
       // ...

        reset: () => {
          set(emptyState)
        },
      }))
    )
  )
}

Does someone can help me ?

[dai-shi]

Please take a look at the working examples with types in tests/middlewareTypes.test.tsx.
Also, note that since v4 we have another pattern for React Context without zustand/context.

[MatteoGauthier]

Okay thanks @dai-shifor your answer, here is my working code

export const initializeStore = (preloadedState = {}) => {
  return create<InitialState, [["zustand/devtools", InitialState]]>( // here
    devtools(
      log(
        combine({ ...initialState, ...preloadedState }, (set, get) => ({
          addNewBlock: (block: Block) => {
            set((state) => {
              const existingBlock = state.currentBlocks.find(({ id }) => id === block.id)
              if (!existingBlock) {
                return produce(state, (draft) => {
                  draft.currentBlocks.push(block)
                })
              }
            })
          }
        }))
      )
    )
  )
}

[MatteoGauthier]

I've done some edits to match v4 requirement.

- type UseStoreState = typeof initializeStore extends (...args: never) => UseBoundStore<infer T> ? T : never
+ type UseStoreState = UseBoundStore<StoreApi<InitialState>>

- const zustandContext = createContext<UseStoreState>()
+ const zustandContext = createContext<StoreApi<UseStoreState>>()

export const initializeStore = (preloadedState = {}) => {
- return create<InitialState, [["zustand/devtools", InitialState]]>(
+ return create<InitialState>()(
    devtools(
      log(
        combine({ ...initialState, ...preloadedState }, (set, get) => ({
          // ...
        }))
      )
    )
  )
}

Thanks a lot for your help !