How do I persist Map and Sets in zustand?

When using Zustand for state management, persisting data is a common requirement, especially for complex data types such as Map and Set. Zustand is a lightweight state management library that lacks built-in persistence functionality, but we can achieve persistence by integrating other libraries. Below are the steps and examples to implement persistence for Map and Set:

1. Use the appropriate persistence library

To persist Zustand's state, utilize the persist middleware from zustand/middleware. Additionally, since Map and Set are not standard JSON formats, direct serialization and deserialization may lead to issues; therefore, convert them into persistent formats first.

2. Convert Map and Set into persistent formats

Before persistence, convert Map and Set into arrays or objects, as these formats are compatible with JSON.stringify. Similarly, when restoring from storage, convert these arrays or objects back to Map or Set.

3. Implement persistence and restoration logic

When creating a Zustand store, implement persistence by using the persist middleware and providing custom serialization (serialize) and deserialization (deserialize) methods.

Example Code

Here is a simple example demonstrating how to persist a Zustand store containing Map and Set:

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

const useStore = create(persist((set) => ({
  myMap: new Map([['key1', 'value1']]),
  mySet: new Set(['item1']),
  addMapItem: (key, value) => set((state) => {
    const newMap = new Map(state.myMap);
    newMap.set(key, value);
    return { myMap: newMap };
  }),
  addSetItem: (item) => set((state) => {
    const newSet = new Set(state.mySet);
    newSet.add(item);
    return { mySet: newSet };
  }),
}), {
  name: 'my-storage', // unique name for the storage (required)
  getStorage: () => localStorage, // (optional) define custom storage, defaults to localStorage
  serialize: (state) => JSON.stringify({
    myMap: Array.from(state.myMap.entries()),
    mySet: Array.from(state.mySet),
  }),
  deserialize: (str) => {
    const { myMap, mySet } = JSON.parse(str);
    return {
      myMap: new Map(myMap),
      mySet: new Set(mySet),
    };
  },
}));

// Use the store's actions
function Component() {
  const { addMapItem, addSetItem, myMap, mySet } = useStore();

  // Add data to Map and Set
  addMapItem('key2', 'value2');
  addSetItem('item2');

  // Output Map and Set contents
  console.log([...myMap]); // Output Map contents
  console.log([...mySet]); // Output Set contents
}

Component();

In this example, we define two methods, addMapItem and addSetItem, to update the state of Map and Set. We use Zustand's persist middleware to persist these states, handling serialization and deserialization of Map and Set through custom serialize and deserialize methods.

In summary, by this approach, we can effectively integrate complex data types like Map and Set into Zustand's persistence logic, ensuring the application's state is restored after page refresh.