How to set names for devtools

[vaynevayne]

now it is instance

[dbritto-dev]

@vaynevayne you can read more about devtools here -> https://github.com/pmndrs/zustand?tab=readme-ov-file#redux-devtools

[vaynevayne]

const myMiddlewares = f => devtools(computed(f, computedState), { name: 'useUserStore' })

Thank you, how can I set typescript for this middle function?

[dbritto-dev]

@vaynevayne here you go ->

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

const myMiddlewares = <T = unknown>(f: StateCreator<T, [], []>) => devtools(persist(f, { name: 'bearStore' }))

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()(
  myMiddlewares((set) => ({
    bears: 0,
    increase: (by) => set((state) => ({ bears: state.bears + by })),
  })),
)