Enabling devtools -- incorrect docs?

[simon3495]

The docs says do this:

const repoStore = createStore('repo')({
  name: 'zustandX',
  stars: 0,
  middlewares: ['immer', 'devtools', 'persist']
})

That does not work, so I took a look at the source code. You are supposed to set devtools in a second options parameter to createStore:

export const createStore =
  <TName extends string>(name: TName) =>
  <T extends State>(
    initialState: T,
    options: CreateStoreOptions<T> = {}
  ): StoreApi<TName, T, StateActions<T>> => {
    const {
      middlewares: _middlewares = [],
      devtools,
      persist,
      immer,
    } = options;

So something along the lines of:

	return createStore("UserData")<UserData>(defaultValues, {
		devtools: {
		   // What values to put in here though? The docs doesn't say
		},
		
		// This does not work:
		// middlewares: ["devtools"],
	});

It expects:

interface CreateStoreOptions<T extends State> {
    /**
     * Zustand middlewares.
     */
    middlewares?: any[];
    /**
     * Devtools middleware options.
     */
    devtools?: DevtoolsOptions;
    /**
     * Immer middleware options.
     */
    immer?: ImmerOptions;
    /**
     * Persist middleware options.
     */
    persist?: PersistOptions<Partial<T>>;
}

export interface DevtoolsOptions extends Config {
    name?: string;
    enabled?: boolean;
    anonymousActionType?: string;
    store?: string;
}

What's a valid entry for DevtoolsOptions I can use? I mean, what should I set name to and such? The docs doesn't mention this.

[zbeyens]

You'll need to dig a bit into zustand. PR's welcome to improve the docs.

[simon3495]

Figured it out, the name is simply the name of the store, and then you just put enabled: true, and then you can see the zustand state in the redux dev tools. So:

	createStore("UserData")<UserData>(defaultValues, {
		devtools: {
			name: "UserData",
			enabled: true,
		}
	});