-
The current immer middleware doc page has the following code example: import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
type State = {
count: number
}
type Actions = {
increment: (qty: number) => void
decrement: (qty: number) => void
}
export const useCountStore = create(
immer<State & Actions>((set) => ({
count: 0,
increment: (qty: number) =>
set((state) => {
state.count += qty
}),
decrement: (qty: number) =>
set((state) => {
state.count -= qty
}),
}))
) At least in my IDE (PHPStorm 2023.2), this means you get no introspection on where the Actions are being used, besides a reference to the function in the export const useCountStore = create<State & Actions>()(
immer((set) => ({
count: 0,
increment: (qty: number) =>
set((state) => {
state.count += qty
}),
decrement: (qty: number) =>
set((state) => {
state.count -= qty
}),
}))
) (note the extra braces after create, as mentioned in the Typescript usage docs) fixes this and returns full introspection. My typescript knowledge is lacking on explaining why this is, but maybe it would be interesting to switch the types around in the docs as well? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
export const useCountStore = create<State & Actions>()( That's correct. |
Beta Was this translation helpful? Give feedback.
-
I'm so confused right now. This weekend, moving the type declaration fixed the introspection. I opened up the project again today and... Introspection is broken again... Edit: disregard, it's a PHPStorm bug, fairly certain. |
Beta Was this translation helpful? Give feedback.
That's correct.
immer<State & Actions>((set) => ({
is just wrong.Can you open a PR?