zustand: [devtools] doesn't log actions since v2

When updating from 1.0.7 to 2.2.1, I lose the tracking of all actions in the Redux devtools:

2.2.1

1.0.7

The app works just fine and the store updates correctly when using the app, it just doesn’t log out the commits any more.

Using it like:

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

export const DefaultStoreState: DefaultStateGetters = {
  lastDataUpdate: new Date(),
  loading: false,
  showDrawer: false,
  message: null,
  ...
}

const store: StateCreator<DefaultState> = (set, get) => ({
  ...DefaultStoreState,
  ...
})

export const [useStore, Store] = create<DefaultState>(devtools(store, 'WACHS App Store'))

Any pointers would be appreciated. Let me know if you need more detail and I will update this post.

Cheers & thanks Patrik

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 20 (9 by maintainers)

Most upvoted comments

Hey @pzi,

As you can see on the line https://github.com/react-spring/zustand/blob/master/src/middleware.ts#L33, you need to put name of your function that you want to track in Redux dev tools.

For example:

const [useStore] = create(devtools(set => ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 }), 'inc'),
  dec: () => set(state => ({ count: state.count - 1 }), 'dec')
})))

I had the same problem too! Hope this help.

ghost on Nov 8, 2019

For anyone who comes here looking for a quick fix, my solution was to make a type based on the normal StateCreator:

import { State, SetState, StateCreator } from 'zustand';

/** To allow named functions when using devtools */
type StateCreatorDev<T extends State> = (
  set: (partial: Parameters<SetState<T>>[0], name?: string) => void,
  get: Parameters<StateCreator<T>>[1],
  api: Parameters<StateCreator<T>>[2]
) => T;

(edited to work properly, my test wasn’t correct)

cassandramfrancis on Nov 14, 2019

I think I fixed it fully. #167

dai-shi on Aug 25, 2020

Can you try this this @pzi:

import create, { State, PartialState } from 'zustand'
import { devtools } from 'zustand/middleware'

type NamedSetState<T extends State> = (partial: PartialState<T>, name?: any) => void

interface Count {
  count: number
}

const [useStore] = create<Count>(devtools((set: NamedSetState<Count>) => ({
  count: 1,
  inc: () => set((state: any) => ({ count: state.count + 1 }), 'inc'),
  dec: () => set((state: any) => ({ count: state.count - 1 }), 'dec')
})));

@drcmda, should we export this in middleware.ts

export type NamedSetState<T extends State> = (partial: PartialState<T>, name?: any) => void

ghost on Nov 8, 2019

do you know what types it would need? im still struggling with TS. i can update and cut a release to fix this.

drcmda on Nov 8, 2019

Hey @dai-shi,

@vuhg Solution works. But however, if we use immer we have to pass args like below otherwise it will not show state updates in the dev tools.

const immer = (config) => (set, get, api) =>
  config((fn, args) => {
	// args equals to the name we passed to the function in our store ("SET_CART_OPEN", "SET_BACKDROP_OPEN")
    return set(produce(fn), args), get, api;
  });

const [useStore] = create<Store>(
  devtools(
    immer((set) => ({
      cart: {
        open: false,
        setOpen: (value) =>
          set((state) => {
            if (typeof value !== "undefined") {
              state.cart.open = value;
            } else {
              state.cart.open = !state.cart.open;
            }
          }, "SET_CART_OPEN"),
      },
      backdrop: {
        open: false,
        setBackdropOpen: (value) => {
          set((state) => {
            state.backdrop.open = value;
          }, "SET_BACKDROP_OPEN");
        },
      },
    }))
  )
);

sanojsilva on Aug 17, 2020

@pzi Your issue Expected 1 argument but got 2 is caused by this:

const store: StateCreator<DefaultState>

The StateCreator type shouldn’t be used with the middleware’s devtools function. Try this:

type DevToolsStateSetter<T> = (partial: PartialState<T>, name?: string) => void

const store = (
  set: DevToolsStateSetter<DefaultState>,
  get: GetState<DefaultState>
): DefaultState => ({
  ...DefaultStoreState,
  ...
})

We should export a DevToolsStateCreator type in middleware to solve this. We should also default name to 'action' like you said.

JeremyRH on Nov 13, 2019