actions returns a error : not a function

[RaffDv]

hi, first sorry my bad english I'm Braziliam.

I'm having problems using the persist/middleware, I'm using zustent + nextjs 13 (app folder), and I need to persist the data. When using the persist, I receive the data correctly from the state, but when I try to use the functions inside the action I get the error: is not a function.

I know it must be a stupid error but I don't know what to do, nothing I've tried has helped, can anyone help me?

Here is the code for my store (PS: I'm using the custom hook to get the state as in the zustand docs)

// store.tsx

import api from '@/api'
import { jwtType } from '@/app/page'
import { AuthUserType, StoreProps } from '@/schemas/global'
import jwtDecode from 'jwt-decode'
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

export const useAuthStore = create<StoreProps>()(
  persist(
    (set) => ({
      state: {
        user: null,
      },
      actions: {
        login: async (user) => {
          let token = ''
          const userData: AuthUserType = {
            email: user.email,
            pass: user.pass,
            privileges: 0,
            token: '',
          }

          const r = await api.user.login({ email: user.email, pass: user.pass })
          if (r.success) {
            token = r.auth.split(' ')[1]
            const tokenData: jwtType = jwtDecode(atob(token))
            userData.privileges = tokenData.privileges
            userData.token = token
            set({ state: { user: userData } })
          }
        },
        logout: () => {
          console.log('execute')

          set((state) => ({ state: { user: null } }), true)
        },
      },
    }),
    {
      name: 'auth',
      storage: createJSONStorage(() => localStorage),
    },
  ),
)

[RaffDv]

edit : I moved my functions to the same level as the 'states' object and things started working again. Why? I would like to keep things as they are, separated by objects. Is it possible?

[dbritto-dev]

@RaffDv in a nutshell you are persisting actions too, in order to make it work you need to use partialize: ({ state }) => ({ state })

Note: persisting something requires to serialize and deserialize something. Basically JSON.stringify() as JSON.parse() most of time depending on your storage and you can't persist functions in nested objects

[RaffDv]

@RaffDv in a nutshell you are persisting actions too, in order to make it work you need to use partialize: ({ state }) => ({ state })

Note: persisting something requires to serialize and deserialize something. Basically JSON.stringify() as JSON.parse() most of time depending on your storage and you can't persist functions in nested objects

Sure! Thanks