actions names in devtools (Redux toolkit)

[Ali-Hussein-dev]

When inspecting Zustand's actions in Redux toolkit, all action names are labeled "anonymous". I tried to use both regular and arrow functions but it didn't change anything. Is there away to change the behaviour?

[dai-shi]

You can specify action name in set.

zustand/readme.md

Line 425 in 0b55a3d

'bear/eatFish'

If you don't, it will be anonymous.

zustand/readme.md

Line 442 in 0b55a3d

If an action type is not provided, it is defaulted to "anonymous". You can customize this default value by providing an `anonymousActionType` parameter:

[dai-shi]

With TypeScript, it will be typed only if devtools middleware is used explicitly. Typing is tricky...

https://tsplay.dev/mpK8xN

I think we should update readme.md to follow this pattern to avoid confusion.

[dai-shi]

#2132

[draeton]

Thanks for the quick response! I was looking for a way to do this with the slice defined in another file, and this is what I came up with after inspecting the devtools types:

store.ts

import { StateCreator } from "zustand";

export type WithDevtools<S> = StateCreator<
    S,
    [["zustand/devtools", never]],
    [],
    S
>;

fooSlice.ts

import { WithDevtools } from "./store";

export const createFooSlice: WithDevtools<FooSlice> = (set, get) => ({

[felquis]

This answer helped me, in combination with the doc https://docs.pmnd.rs/zustand/guides/typescript#create-without-curried-workaround

Possibly a point of improvement is a new section that merges section slices-pattern with create without curried workaround

Maybe also explaining a little bit of StateCreator parameters as well.

Thank you.

[dai-shi]

☝️ @dbritto-dev

[gavinthomas-valtech]

Is there a way to do this with reducers and dispatch pattern? I'm also getting anonymous logged in devtools
I[m using createStore as i need a provider.

return createStore<GlobalStore>()(
    devtools(
      (set) => ({
        ...mergedInitialState,
        dispatch: (event: GlobalStoreEvents) => set((state) => globalStoreReducer(state, event)),
 }),
      { name: 'GlobalStore' },

[dai-shi]

Have you tried this?

-         dispatch: (event: GlobalStoreEvents) => set((state) => globalStoreReducer(state, event)),
 }),
+         dispatch: (event: GlobalStoreEvents) => set((state) => globalStoreReducer(state, event), true, 'action name'),
 }),

[gavinthomas-valtech]

unfortunately i get an error when dispatching tot he global store
TypeError: dispatch is not a function