[devtools] doesn't log actions since v2 about zustand HOT 20 CLOSED

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.

from zustand.

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)

from zustand.

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

from zustand.

I think I fixed it fully. #167

from zustand.

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

from zustand.

@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.

from zustand.

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");
        },
      },
    }))
  )
);

from zustand.

thanks for the suggestion @VuHG, however, it seems that the types in typescript are not up-to-date as it's complaining about set only accepting 1 argument, not 2.

from zustand.

i guess, or should it fallback to some default name = "action" or something?

would you make the PR?

from zustand.

Hey drcmda, i'm struggling with TS too 😅 .
I can't get (partial: PartialState<T>, name: any = "action") fallback.

This is popular library (can affect a lot of devs) so i think it better to wait for some TS expert helping us here.

from zustand.

Yeah with the type override it works :) Will use that for now. thanks

from zustand.

I was considering submitting a PR to change the following line:

const namedSet = (state: any, name?: any)

in https://github.com/react-spring/zustand/blob/master/src/middleware.ts#L33 to

const namedSet = (state: any, name: any = 'action')

but that would mean it would always log for to devtools for everyone. Unsure if that's desired?

It actually would also make more sense to remove the type from name as it will just infer the string type from the default action value.
So it could just be: const namedSet = (state: any, name = 'action')

from zustand.

@JeremyRH what do you think?

from zustand.

Can we get this in the docs?

from zustand.

I followed the naming suggestions in this thread, but was still not seeing actions.
I found a quick fix... see PR #117

from zustand.

Does anybody know what's the status of this issue?

from zustand.

@sanojsilva Thanks for the note. Let me read the thread again.

So, the issue can be divided into three pieces, correct?

1. namedSet should have default name
2. TS type in devtools doesn't allow adding set names.
3. Typing with immer middleware needs a workaround

BTW, I have some questions about typing with immer. #96

from zustand.

v3 has replace flag in the second argument. we need to find a better way for the devtools middleware. cc @drcmda

from zustand.

Now v3 is out, We need to fix this. Does anyone have ideas?

from zustand.

Very helpful issue thread! Saved me some hours

from zustand.