Comments (20)
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?
namedSet
should have default name- TS type in
devtools
doesn't allow adding set names. - 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.
Related Issues (20)
- The value I save to storage with persist is delayed when the page refreshes.
- State updated in one component but not in another one
- Typescript + Slices = trouble HOT 7
- Setting nested state make the other states change (their values didn't change)
- zustand concurrent update issue
- Typo in GitHub "About" HOT 1
- import { create ,WritableDraft} from "zustand" HOT 1
- Introduction Zustand page a documentation typo HOT 1
- Ts error on type annotation HOT 3
- Persist middleware keeping old versions of functions around. Breaking apps when deploying to prod
- devtools with option `serialize.immutable` does not deserialize state from devtools correctly (broken redux devtools "Jump" / "Revert" etc.)
- state empty on first render HOT 1
- onRehydrateStorage is invoked before storeage.getItem HOT 1
- About API
- About api docs
- Documentation incorrect: Usage with React Contexts HOT 2
- "useEffect" is not exported by "node_modules/react/index.js"
- Usage of import.meta.env
- enums not working HOT 4
- help wanted
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from zustand.