如何在Zustand中持久化Map与Set？解决序列化兼容问题

由于JSON本身不支持Set和Map类型，Zustand默认的JSON序列化会将它们转为普通对象，导致读取时无法还原。旧版Zustand中使用的serialize/deserialize方法已被弃用，现在可以通过persist中间件的transform配置来处理类型转换：

修改后的完整代码 #

import AsyncStorage from "@react-native-async-storage/async-storage"
import { create } from "zustand"
import { createJSONStorage, persist } from "zustand/middleware"

interface Store {
    names: Set<string>
    addName: (name: string) => void
    removeName: (name: string) => void
}

export const useStore = create<Store>()(
    persist(
        (set) => ({
            names: new Set(),
            addName: (name: string) => {
                set((state) => {
                    const names = new Set(state.names)
                    names.add(name)
                    return { names }
                })
            },
            removeName: (name: string) => {
                set((state) => {
                    const names = new Set(state.names)
                    names.delete(name)
                    return { names }
                })
            }
        }),
        {
            name: "domain-storage",
            storage: createJSONStorage(() => AsyncStorage),
            transform: {
                // 将状态转为可序列化的格式（Set转数组）
                outbound: (state) => ({
                    ...state,
                    names: Array.from(state.names),
                }),
                // 从存储数据还原为原始状态（数组转Set）
                inbound: (storedState) => ({
                    ...storedState,
                    names: new Set(storedState.names),
                }),
            },
        }
    )
)

核心逻辑说明 #

• transform.outbound：在状态写入存储前执行，把Set<string>转换为JSON支持的数组格式，确保能正常序列化存储。
• transform.inbound：从存储读取数据后执行，把数组重新转换为Set<string>，还原原始状态类型。

扩展到Map类型的处理 #

如果需要持久化Map，转换逻辑类似：

transform: {
    outbound: (state) => ({
        ...state,
        // Map转二维数组
        someMap: Array.from(state.someMap.entries()),
    }),
    inbound: (storedState) => ({
        ...storedState,
        // 二维数组转Map
        someMap: new Map(storedState.someMap),
    }),
}

内容的提问来源于stack exchange，提问作者Gus Beringer