nested store function is not a function at runtime (zustand store, immer, persist, typescript)

Viewed 82

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.

0 Answers
Related