doc: update documentation of persist (pmndrs#1512)

* update documentation of persist to include how to handle Map and Set with the new persist API * run prettier * Update docs/integrations/persisting-store-data.md Co-authored-by: Chris K <[email protected]> * Update docs/integrations/persisting-store-data.md Co-authored-by: Chris K <[email protected]> * Update docs/integrations/persisting-store-data.md Co-authored-by: Blazej Sewera <[email protected]> * edit suggestions * fix comment Co-authored-by: Chris K <[email protected]> Co-authored-by: Blazej Sewera <[email protected]>
Mira-Wang · Jan 10, 2023 · 725c2c0 · 725c2c0
1 parent 0b55a3d
commit 725c2c0
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md
@@ -571,3 +571,39 @@ export const useBearStore = create<MyState>()(
   )
 )
 ```
+
+### How do I use it with Map and Set?
+
+With the previous persist API, you would use `serialize`/`deserialize`
+to deal with `Map` and `Set` and convert them into
+an Array so they could be parsed into proper JSON.
+
+The new persist API has deprecated `serialize`/`deserialize`.
+
+Now, you will need to use the `storage` prop.
+Let's say your state uses `Map` to handle a list of `transactions`,
+then you can convert the Map into an Array in the storage prop:
+
+```ts
+  storage: {
+    getItem: (name) => {
+      const str = localStorage.getItem(name)
+      return {
+        state: {
+          ...JSON.parse(str).state,
+          transactions: new Map(JSON.parse(str).state.transactions),
+        },
+      }
+    },
+    setItem: (name, newValue) => {
+      const str = JSON.stringify({
+        state: {
+          ...newValue.state,
+          transactions: Array.from(newValue.state.transactions.entries()),
+        },
+      })
+      localStorage.setItem(name, str)
+    },
+    removeItem: (name) => localStorage.removeItem(name),
+  },
+```