Persist does not seem to work with Set - Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) #2452

ananta-dev · 2024-03-31T10:39:13Z

ananta-dev
Mar 31, 2024

Hi

I created a Zustand store based on Set to keep a selection of favourite items, which works perfectly OK:

import { create } from 'zustand'

type FavouriteCertificatesStore = {
    favourites: Set<number>
    addFavourite: (id: number) => void
    removeFavourite: (id: number) => void
    toggleFavourite: (id: number) => void
}

export const useFavouriteCertificatesStore =
    create<FavouriteCertificatesStore>()(setState => ({
        favourites: new Set<number>(),
        addFavourite: (id: number) => {
            console.log('adding fav id: ', id)
            setState(prev => ({
                favourites: new Set(prev.favourites).add(id),
            }))
        },
        removeFavourite: (id: number) => {
            console.log('removing fav id: ', id)
            setState(prev => {
                const newSet = new Set(prev.favourites)
                newSet.delete(id)
                return { favourites: newSet }
            })
        },
        toggleFavourite: (id: number) => {
            setState(prev => {
                if (prev.favourites.has(id)) {
                    const newSet = new Set(prev.favourites)
                    newSet.delete(id)
                    return { favourites: newSet }
                } else {
                    return {
                        favourites: new Set(prev.favourites).add(id),
                    }
                }
            })
        },
    }))

However, when I add persistance with persist, it does not seem to work:

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

type FavouriteCertificatesStore = {
    favourites: Set<number>
    addFavourite: (id: number) => void
    removeFavourite: (id: number) => void
    toggleFavourite: (id: number) => void
}

export const useFavouriteCertificatesStore =
    create<FavouriteCertificatesStore>()(
        persist(
            setState => ({
                favourites: new Set<number>(),
                addFavourite: (id: number) => {
                    console.log('adding fav id: ', id)
                    setState(prev => ({
                        favourites: new Set(prev.favourites).add(id),
                    }))
                },
                removeFavourite: (id: number) => {
                    console.log('removing fav id: ', id)
                    setState(prev => {
                        const newSet = new Set(prev.favourites)
                        newSet.delete(id)
                        return { favourites: newSet }
                    })
                },
                toggleFavourite: (id: number) => {
                    setState(prev => {
                        if (prev.favourites.has(id)) {
                            const newSet = new Set(prev.favourites)
                            newSet.delete(id)
                            return { favourites: newSet }
                        } else {
                            return {
                                favourites: new Set(prev.favourites).add(id),
                            }
                        }
                    })
                },
            }),
            { name: 'favourite-certificates' }
        )
    )

I am getting this error:

Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
    at new Set (<anonymous>)
    at favouritesCertificat…=1711881367432:8:33
    at setState (zustand.js?v=66b3e68f:16:55)
    at zustand_middleware.js?v=66b3e68f:485:7
    at addFavourite (favouritesCertificat…=1711881367432:7:13)
    at Object.onCheckedChange [as current] (columns.tsx?t=1711881367432:193:25)
    at chunk-NEM64C25.js?v=66b3e68f:135:135
    at chunk-NEM64C25.js?v=66b3e68f:156:9
    at @radix-ui_react-chec….js?v=66b3e68f:92:7
    at handleEvent (chunk-NEM64C25.js?v=66b3e68f:118:80)

| (anonymous) | @ | favouritesCertificat…s?t=1711881367432:8 -- | -- | -- | --   
| setState | @ | zustand.js?v=66b3e68f:16   
| (anonymous) | @ | zustand_middleware.js?v=66b3e68f:485   
| addFavourite | @ | favouritesCertificat…s?t=1711881367432:7   
| onCheckedChange | @ | columns.tsx?t=1711881367432:193   
| (anonymous) | @ | chunk-NEM64C25.js?v=66b3e68f:135   
| (anonymous) | @ | chunk-NEM64C25.js?v=66b3e68f:156   
| (anonymous) | @ | @radix-ui_react-chec…ox.js?v=66b3e68f:92   
| handleEvent | @ | chunk-NEM64C25.js?v=66b3e68f:118   
| callCallback2 | @ | chunk-PBCTMQVF.js?v=66b3e68f:3674   
| invokeGuardedCallbackDev | @ | chunk-PBCTMQVF.js?v=66b3e68f:3699   
| invokeGuardedCallback | @ | chunk-PBCTMQVF.js?v=66b3e68f:3733   
| invokeGuardedCallbackAndCatchFirstError | @ | chunk-PBCTMQVF.js?v=66b3e68f:3736   
| executeDispatch | @ | chunk-PBCTMQVF.js?v=66b3e68f:7016   
| processDispatchQueueItemsInOrder | @ | chunk-PBCTMQVF.js?v=66b3e68f:7036   
| processDispatchQueue | @ | chunk-PBCTMQVF.js?v=66b3e68f:7045   
| dispatchEventsForPlugins | @ | chunk-PBCTMQVF.js?v=66b3e68f:7053   
| (anonymous) | @ | chunk-PBCTMQVF.js?v=66b3e68f:7177   
| batchedUpdates$1 | @ | chunk-PBCTMQVF.js?v=66b3e68f:18909   
| batchedUpdates | @ | chunk-PBCTMQVF.js?v=66b3e68f:3579   
| dispatchEventForPluginEventSystem | @ | chunk-PBCTMQVF.js?v=66b3e68f:7176   
| dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay | @ | chunk-PBCTMQVF.js?v=66b3e68f:5478  
| dispatchEvent | @ | chunk-PBCTMQVF.js?v=66b3e68f:5472   
| dispatchDiscreteEvent

Interestingly, when I do console.log of the store favourites variable in a React FC that uses it, I get a different type, depending on whether persist is used or not:

// In React FC
    const favouriteCertificates = useFavouriteCertificatesStore(
        state => state.favourites
    )
    console.log({ favouriteCertificates })

Without persist:

{
    "favouriteCertificates": Set(0) { size: 0}
}

With persist:

{
    "favouriteCertificates": {}
}

It looks as if persist is initializing favourites as an empty Object, rather than an empty Set.
Object is not iterable and we seem to need an iterable.

ananta-dev · 2024-03-31T11:29:04Z

ananta-dev
Mar 31, 2024
Author

Hi

I created a Zustand store based on Set to keep a selection of favourite items, which works perfectly OK:

import { create } from 'zustand'

type FavouriteCertificatesStore = {
    favourites: Set<number>
    addFavourite: (id: number) => void
    removeFavourite: (id: number) => void
    toggleFavourite: (id: number) => void
}

export const useFavouriteCertificatesStore =
    create<FavouriteCertificatesStore>()(setState => ({
        favourites: new Set<number>(),
        addFavourite: (id: number) => {
            console.log('adding fav id: ', id)
            setState(prev => ({
                favourites: new Set(prev.favourites).add(id),
            }))
        },
        removeFavourite: (id: number) => {
            console.log('removing fav id: ', id)
            setState(prev => {
                const newSet = new Set(prev.favourites)
                newSet.delete(id)
                return { favourites: newSet }
            })
        },
        toggleFavourite: (id: number) => {
            setState(prev => {
                if (prev.favourites.has(id)) {
                    const newSet = new Set(prev.favourites)
                    newSet.delete(id)
                    return { favourites: newSet }
                } else {
                    return {
                        favourites: new Set(prev.favourites).add(id),
                    }
                }
            })
        },
    }))

However, when I add persistance with persist, it does not seem to work:

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

type FavouriteCertificatesStore = {
    favourites: Set<number>
    addFavourite: (id: number) => void
    removeFavourite: (id: number) => void
    toggleFavourite: (id: number) => void
}

export const useFavouriteCertificatesStore =
    create<FavouriteCertificatesStore>()(
        persist(
            setState => ({
                favourites: new Set<number>(),
                addFavourite: (id: number) => {
                    console.log('adding fav id: ', id)
                    setState(prev => ({
                        favourites: new Set(prev.favourites).add(id),
                    }))
                },
                removeFavourite: (id: number) => {
                    console.log('removing fav id: ', id)
                    setState(prev => {
                        const newSet = new Set(prev.favourites)
                        newSet.delete(id)
                        return { favourites: newSet }
                    })
                },
                toggleFavourite: (id: number) => {
                    setState(prev => {
                        if (prev.favourites.has(id)) {
                            const newSet = new Set(prev.favourites)
                            newSet.delete(id)
                            return { favourites: newSet }
                        } else {
                            return {
                                favourites: new Set(prev.favourites).add(id),
                            }
                        }
                    })
                },
            }),
            { name: 'favourite-certificates' }
        )
    )

I am getting this error:

Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
    at new Set (<anonymous>)
    at favouritesCertificat…=1711881367432:8:33
    at setState (zustand.js?v=66b3e68f:16:55)
    at zustand_middleware.js?v=66b3e68f:485:7
    at addFavourite (favouritesCertificat…=1711881367432:7:13)
    at Object.onCheckedChange [as current] (columns.tsx?t=1711881367432:193:25)
    at chunk-NEM64C25.js?v=66b3e68f:135:135
    at chunk-NEM64C25.js?v=66b3e68f:156:9
    at @radix-ui_react-chec….js?v=66b3e68f:92:7
    at handleEvent (chunk-NEM64C25.js?v=66b3e68f:118:80)

| (anonymous) | @ | favouritesCertificat…s?t=1711881367432:8 -- | -- | -- | --   
| setState | @ | zustand.js?v=66b3e68f:16   
| (anonymous) | @ | zustand_middleware.js?v=66b3e68f:485   
| addFavourite | @ | favouritesCertificat…s?t=1711881367432:7   
| onCheckedChange | @ | columns.tsx?t=1711881367432:193   
| (anonymous) | @ | chunk-NEM64C25.js?v=66b3e68f:135   
| (anonymous) | @ | chunk-NEM64C25.js?v=66b3e68f:156   
| (anonymous) | @ | @radix-ui_react-chec…ox.js?v=66b3e68f:92   
| handleEvent | @ | chunk-NEM64C25.js?v=66b3e68f:118   
| callCallback2 | @ | chunk-PBCTMQVF.js?v=66b3e68f:3674   
| invokeGuardedCallbackDev | @ | chunk-PBCTMQVF.js?v=66b3e68f:3699   
| invokeGuardedCallback | @ | chunk-PBCTMQVF.js?v=66b3e68f:3733   
| invokeGuardedCallbackAndCatchFirstError | @ | chunk-PBCTMQVF.js?v=66b3e68f:3736   
| executeDispatch | @ | chunk-PBCTMQVF.js?v=66b3e68f:7016   
| processDispatchQueueItemsInOrder | @ | chunk-PBCTMQVF.js?v=66b3e68f:7036   
| processDispatchQueue | @ | chunk-PBCTMQVF.js?v=66b3e68f:7045   
| dispatchEventsForPlugins | @ | chunk-PBCTMQVF.js?v=66b3e68f:7053   
| (anonymous) | @ | chunk-PBCTMQVF.js?v=66b3e68f:7177   
| batchedUpdates$1 | @ | chunk-PBCTMQVF.js?v=66b3e68f:18909   
| batchedUpdates | @ | chunk-PBCTMQVF.js?v=66b3e68f:3579   
| dispatchEventForPluginEventSystem | @ | chunk-PBCTMQVF.js?v=66b3e68f:7176   
| dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay | @ | chunk-PBCTMQVF.js?v=66b3e68f:5478  
| dispatchEvent | @ | chunk-PBCTMQVF.js?v=66b3e68f:5472   
| dispatchDiscreteEvent

Interestingly, when I do console.log of the store favourites variable in a React FC that uses it, I get a different type, depending on whether persist is used or not:

// In React FC
    const favouriteCertificates = useFavouriteCertificatesStore(
        state => state.favourites
    )
    console.log({ favouriteCertificates })

Without persist:

{
    "favouriteCertificates": Set(0) { size: 0}
}

With persist:

{
    "favouriteCertificates": {}
}

It looks as if persist is initializing favourites as an empty Object, rather than an empty Set. Object is not iterable and we seem to need an iterable.

### UPDATE:
(It seems cannot comment on my own post, so I am editing my post)

I converted the store to use an array instead of a Set:

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

type FavouriteCertificatesStore = {
    favourites: number[]
    addFavourite: (id: number) => void
    removeFavourite: (id: number) => void
    toggleFavourite: (id: number) => void
}

export const useFavouriteCertificatesStore =
    create<FavouriteCertificatesStore>()(
        persist(
            setState => ({
                favourites: [],
                addFavourite: (id: number) => {
                    console.log('adding fav id: ', id)
                    setState(prev => {
                        const newFavourites = prev.favourites.includes(id)
                            ? prev.favourites
                            : [...prev.favourites, id]
                        return { favourites: newFavourites }
                    })
                },
                removeFavourite: (id: number) => {
                    console.log('removing fav id: ', id)
                    setState(prev => {
                        const newFavourites = prev.favourites.filter(
                            fav => fav !== id
                        )
                        return { favourites: newFavourites }
                    })
                },
                toggleFavourite: (id: number) => {
                    setState(prev => {
                        if (prev.favourites.includes(id)) {
                            const newFavourites = prev.favourites.filter(
                                fav => fav !== id
                            )
                            return {
                                favourites: newFavourites,
                            }
                        } else {
                            const newFavourites = prev.favourites.includes(id)
                                ? prev.favourites
                                : [...prev.favourites, id]
                            return { favourites: newFavourites }
                        }
                    })
                },
            }),
            { name: 'favourite-certificates' }
        )
    )

Now I am getting another error when adding a favourite:

favouritesCertificat…s?t=1711884029734:8 Uncaught TypeError: prev.favourites.includes is not a function
    at favouritesCertificat…=1711884029734:8:55
    at setState (zustand.js?v=66b3e68f:16:55)
    at zustand_middleware.js?v=66b3e68f:485:7
    at addFavourite (favouritesCertificat…=1711884029734:7:13)
    at Object.onCheckedChange [as current] (columns.tsx?t=1711884029734:193:25)
    at chunk-NEM64C25.js?v=66b3e68f:135:135
    at chunk-NEM64C25.js?v=66b3e68f:156:9
    at @radix-ui_react-chec….js?v=66b3e68f:92:7
    at handleEvent (chunk-NEM64C25.js?v=66b3e68f:118:80)
    at HTMLUnknownElement.callCallback2 (chunk-PBCTMQVF.js?v=66b3e68f:3674:22)

Console.log:

Without persist:

{ favouriteCertificates: Array(0) }
  > favouriteCertificates: []

With persist:

{
    "favouriteCertificates": {}
}

1 reply

dbritto-dev Mar 31, 2024
Maintainer

@ananta-dev seems like our search tool isn't working because people still didn't find the right docs, here you go https://docs.pmnd.rs/zustand/integrations/persisting-store-data#how-do-i-use-it-with-map-and-set

ananta-dev · 2024-03-31T12:43:02Z

ananta-dev
Mar 31, 2024
Author

@dbritto-dev, in my opinion, the documentation for Persist is not clearly organized and complete.

I have had, of course, done multiple searches and studied this for two hours, and that section did not come up in any of those searches. I saw that section at the bottom after reading the whole page from top to bottom. The Map example at the bottom did not work for me.

I managed to put together a solution for Set based on superjson, which seems to work:

import { create } from 'zustand'
import { PersistStorage, persist } from 'zustand/middleware'
import superjson from 'superjson'

type FavouriteCertificatesStore = {
    favourites: Set<number>
    addFavourite: (id: number) => void
    removeFavourite: (id: number) => void
    toggleFavourite: (id: number) => void
}

const superjsonPersistStorage: PersistStorage<FavouriteCertificatesStore> = {
    getItem: name => {
        const str = localStorage.getItem(name)
        if (!str) return null
        return superjson.parse(str)
    },
    setItem: (name, value) => {
        localStorage.setItem(name, superjson.stringify(value))
    },
    removeItem: name => localStorage.removeItem(name),
}

export const useFavouriteCertificatesStore =
    create<FavouriteCertificatesStore>()(
        persist(
            setState => ({
                favourites: new Set<number>(),
                addFavourite: (id: number) => {
                    console.log('adding fav id: ', id)
                    setState(prev => ({
                        favourites: new Set(prev.favourites).add(id),
                    }))
                },
                removeFavourite: (id: number) => {
                    console.log('removing fav id: ', id)
                    setState(prev => {
                        const newSet = new Set(prev.favourites)
                        newSet.delete(id)
                        return { favourites: newSet }
                    })
                },
                toggleFavourite: (id: number) => {
                    setState(prev => {
                        if (prev.favourites.has(id)) {
                            const newSet = new Set(prev.favourites)
                            newSet.delete(id)
                            return { favourites: newSet }
                        } else {
                            return {
                                favourites: new Set(prev.favourites).add(id),
                            }
                        }
                    })
                },
            }),
            {
                name: 'favourite-certificates',
                storage: superjsonPersistStorage,
            }
        )
    )

1 reply

dbritto-dev Mar 31, 2024
Maintainer

@ananta-dev what you mean with "with not clearly and completed"? you can find all you need on the persisting store data guide or I'm missing something

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Persist does not seem to work with Set - Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) #2452

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Persist does not seem to work with Set - Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) #2452

ananta-dev Mar 31, 2024

Replies: 2 comments · 2 replies

ananta-dev Mar 31, 2024 Author

dbritto-dev Mar 31, 2024 Maintainer

ananta-dev Mar 31, 2024 Author

dbritto-dev Mar 31, 2024 Maintainer

ananta-dev
Mar 31, 2024

Replies: 2 comments 2 replies

ananta-dev
Mar 31, 2024
Author

dbritto-dev Mar 31, 2024
Maintainer

ananta-dev
Mar 31, 2024
Author

dbritto-dev Mar 31, 2024
Maintainer