I've got a problem in a next.js typescript project where i'm using zustand store with persist and immer: https://github.com/pmndrs/zustand
If the toggle_slide_over function is outside of the session_setup object, it works.
If it is inside, it throws runtime error 'not a function'.
Why & how do i fix this?
Interface:
export interface MyAppState {
session_setup: {
slide_over_open: boolean,
toggle_slide_over: (new_toggle_state: boolean) => void,
...
},
session_setup_toggle_slide_over: (new_toggle_state: boolean) => void,
...
}
Function declarations inside doPersist():
const doPersist: () any => { return persist((set) => ({
session_setup: {
...
toggle_slide_over: (new_toggle_state) => set(
produce(state => { state.session_setup.slide_over_open = new_toggle_state })
),
},
session_setup_toggle_slide_over: (new_toggle_state) => set(
produce(state => { state.session_setup.slide_over_open = new_toggle_state })
),
...
How they are retrieved in React:
// When nested:
const toggle_slide_over = useMyAppStore(state => state.session_setup.toggle_slide_over)
// When not nested:
const toggle_slide_over = useMyAppStore(state => state.session_setup_toggle_slide_over)
How they are used:
onClick={() => toggle_slide_over(new_state)}
Store:
const initializeStoreByEnv = (): any => {
if (process.env.NODE_ENV === 'development') return devtools(doPersist())
else return doPersist()
}
export const useMyAppStore = create<MyAppState>()(
initializeStoreByEnv()
)
I've searched for related zustand/immer/redux/functions nested in objects/function not a function at runtime errors but haven't found anything useful, yet...
I'm working around this by just prefixing out-of-object functions with 'session_setup_', which is ok atm, but will get xxxl names with another level of nesting objects.