Zustand-devtools
This is a small library that dynamically adds names to your devtools actions.
Installation
npm i zustand-devtools
yarn add zustand-devtools
Problem
Devtools will only log actions from each separated store unlike in a typical combined reducers redux store.
If an action type is not provided, it is defaulted to "anonymous".
To add an action name, a specific action type, pass the third parameter to the set function:
const useCountStore = create((set, get) => ({
count: 0,
increment: () => set(
(state) => ({ count: ++state.count }),
false,
"count/increment" // action name
),
}))
or
const useCountStore = create((set, get) => ({
count: 0,
increment: () => set(
(state) => ({ count: ++state.count }),
false,
{ type: "count/increment" } // action name
),
}))
But it's tedious always throwing out a name
What I'm suggesting
You don't have to manually add names. Instead, the names will be the names of your functions.
For example
import { devtools } from "zustand-devtools";
const useCountStore = create(
devtools((set) => ({
count: 0,
increment: () => set((state) => ({ count: ++state.count })),
})),
);
import { devtools } from "zustand-devtools";
const useCountStore = create(
devtools((set) => ({
count: 0,
increment: () => set((state) => ({ count: ++state.count })),
}), { name: "count" }),
);
If you add a name to devtools options, the output will be like this
But if you want to set your name in the set function, it will be prioritized
import { devtools } from "zustand-devtools";
const useCountStore = create(devtools((set, get) => ({
increment: () => set(
(state) => ({ count: ++state.count }),
false,
"my action name" // action name will be prioritized
),
})))