Is there a clean way to disable devtools in prod?

[mlazarenco]

[dai-shi]

It depends on your bundler, but something like this might work.

const devtoolsInNonProd = process.env.NODE_ENV === 'production' ? (fn) => fn : devtools

Typing can be tricky, though.

[dai-shi]

Maybe we force the type?

const devtoolsInNonProd = (process.env.NODE_ENV === 'production' ? (fn) => fn : devtools) as unknown as type of devtools

[mlazarenco]

[dai-shi]

oops:

const devtoolsInNonProd = (process.env.NODE_ENV === 'production' ? (fn: any) => fn : devtools) as unknown as typeof devtools

[mlazarenco]

lol i thought maybe this is some new typescript syntax

[berakoccc]

I think the shortest way would be:

const modifiedDevtools = process.env.NODE_ENV === 'production' ? ((fn) => fn) as typeof devtools : devtools;

[web4-var]

hi @mlazarenco and @dai-shi ,
i tried the same thing mentioned const myMiddlewares = (process.env.NODE_ENV === 'development' ? (fn: any) => fn : devtools) as unknown as typeof devtools

myMiddlewares((set)=> myMiddlewares((set) => ({

userDetails: {
  firstName: '',
  lastName: '',
},

}))

but this doesn't seem to work .. i can see the instance in the Redux dev tool .
Any other way we can disable this when we run it in prod

i even tried setting enabled flag based on
const enableDevTools = process.env.NODE_ENV === 'development' ? false : true;
devtools((set),{enabled:enableDevTools)) .. still i can see the devtools when i run my application locally

[dai-shi]

still i can see the devtools when i run my application locally

Can you confirm if it's expected with removing devtools completely?

[puxiao]

After continuous attempts, this is the best use guide I think at the moment.

src/store/myMiddleWares.ts

import { StateCreator } from 'zustand'
import { devtools, DevtoolsOptions } from 'zustand/middleware'

const myMiddleWares = (store: StateCreator<unknown>, options?: DevtoolsOptions) => {
  return (process.env.NODE_ENV === 'development' ? devtools(store, options) : store) as any
}

export default myMiddleWares

Tips: return .... as any

src/store/useCurPageIndex.ts

import { create } from "zustand"
import myMiddleWares from "./myMiddleWares"

interface UseCurPageIndex {
  index: number
  setData: (newValue: number) => void
}

const useCurPageIndex = create<UseCurPageIndex>()(myMiddleWares((set, get): UseCurPageIndex => ({
  index: 0,
  setData: (newValue) => set({ index: newValue })
}), { name: 'useCurPageIndex' }))

export default useCurPageIndex

Tips: create<UseXxx>()(myMiddleWares)(set,get):UseXxx => ...

"UseXxx" appears twice.

[urieltfk]

There's actually a way - I found it poorly documented.
devtools middleware receives devtoolsOptions?: DevToolsOptions.
This object has a property named 'enabled' - you can set it to true or false in order to disable and enable devtools

import { create } from "zustand";
import { devtools } from "zustand/middleware";

const useStore = create<IStorage>()(
  devtools((set) => ({/* State */}), { enabled: true })
);

[yeasir01]

Yes, this works for me. Thanks!

[GabbereX]

There's actually a way - I found it poorly documented. devtools middleware receives devtoolsOptions?: DevToolsOptions. This object has a property named 'enabled' - you can set it to true or false in order to disable and enable devtools

import { create } from "zustand";
import { devtools } from "zustand/middleware";

const useStore = create<IStorage>()(
  devtools((set) => ({/* State */}), { enabled: true })
);

This helps to block the output of the slice in redux devtools, but the assembly still gets a block of code that is superfluous for the visitor. I have not been able to find a way to ensure that the tool does not get into the assembly, but unsuccessfully, especially it is difficult to implement with TS by saving types and it is not clear what to do with signatures for set. It seems to be a problem.

Found a solution that works for me:

const isDevMode = process.env.NODE_ENV === 'development'

export const createState = <T extends State>(
  name: string,
  fn: StateCreator<T, [['zustand/devtools', never]], []>,
) => (
    isDevMode
      ? create(devtools(fn, { name, anonymousActionType: `${name}/action` }))
      : create(fn))