From 8fdfe3a6d83ce99302937fa93a3d769b409fd0f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B6=8C=EC=8B=A0=ED=95=99?= Date: Wed, 25 Oct 2023 03:26:25 +0900 Subject: [PATCH 1/4] docs: update documentation of persist Add superjson serialization/deserialization example to Zustand persist documentation --- docs/integrations/persisting-store-data.md | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md index 15385c87f9..4382d0dd60 100644 --- a/docs/integrations/persisting-store-data.md +++ b/docs/integrations/persisting-store-data.md @@ -731,3 +731,32 @@ interface BearState { removeItem: (name) => localStorage.removeItem(name), }, ``` + +If writing serialisation and deserialisation code is tedious, you can use third-party libraries to serialise and deserialise different types of data. + +SuperJSON serialises data along with its type, allowing the data to be parsed back to its original type upon deserialisation + +```ts +import superjson from "superjson"; +import { StorageValue } from "zustand/middleware"; + + +interface BearState { +// ... +} +//... + + storage: { + getItem: (name) => { + const str = localStorage.getItem(name); + if (!str) return null; + return { + state: superjson.parse>(str).state, + }; + }, + setItem: (name, value) => { + localStorage.setItem(name, superjson.stringify(value)); + }, + removeItem: (name) => localStorage.removeItem(name), + } +``` From 0bb6035f1e422248e9dec56696fd9c1447c3a585 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B6=8C=EC=8B=A0=ED=95=99?= Date: Thu, 26 Oct 2023 01:41:34 +0900 Subject: [PATCH 2/4] docs: fix spelling documentation of persist --- docs/integrations/persisting-store-data.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md index 4382d0dd60..75d2046be7 100644 --- a/docs/integrations/persisting-store-data.md +++ b/docs/integrations/persisting-store-data.md @@ -732,15 +732,14 @@ interface BearState { }, ``` -If writing serialisation and deserialisation code is tedious, you can use third-party libraries to serialise and deserialise different types of data. +If writing serialization and deserialization code is tedious, you can use third-party libraries to serialize and deserialize different types of data -SuperJSON serialises data along with its type, allowing the data to be parsed back to its original type upon deserialisation +SuperJSON serialize data along with its type, allowing the data to be parsed back to its original type upon deserialization ```ts import superjson from "superjson"; import { StorageValue } from "zustand/middleware"; - interface BearState { // ... } From 84f202d0946de2f93e563c833aec1437be81878e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B6=8C=EC=8B=A0=ED=95=99?= Date: Fri, 27 Oct 2023 04:07:09 +0900 Subject: [PATCH 3/4] docs: Apply feedback by moving content under custom storage engine and specifying that the code is an example --- docs/integrations/persisting-store-data.md | 59 ++++++++++++---------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md index 75d2046be7..d545265d07 100644 --- a/docs/integrations/persisting-store-data.md +++ b/docs/integrations/persisting-store-data.md @@ -630,6 +630,37 @@ export const useBoundStore = create( ) ``` +If you're using a type that JSON.stringify() doesn't support, you'll need to write your own serialization/deserialization code. However, if this is tedious, you can use third-party libraries to serialize and deserialize different types of data. + +For example, [Superjson](https://github.com/blitz-js/superjson) can serialize data along with its type, allowing the data to be parsed back to its original type upon deserialization + +```ts +import superjson from "superjson"; // can use anything: serialize-javascript, devalue, etc. +import { StorageValue } from "zustand/middleware"; + +interface BearState { + ...: Map; + ...: Set; + ...: Date, + ...: RegExp; +} +//... + + storage: { + getItem: (name) => { + const str = localStorage.getItem(name); + if (!str) return null; + return { + state: superjson.parse>(str).state, + }; + }, + setItem: (name, value) => { + localStorage.setItem(name, superjson.stringify(value)); + }, + removeItem: (name) => localStorage.removeItem(name), + } +``` + ### How can I rehydrate on storage event You can use the Persist API to create your own implementation, @@ -731,31 +762,3 @@ interface BearState { removeItem: (name) => localStorage.removeItem(name), }, ``` - -If writing serialization and deserialization code is tedious, you can use third-party libraries to serialize and deserialize different types of data - -SuperJSON serialize data along with its type, allowing the data to be parsed back to its original type upon deserialization - -```ts -import superjson from "superjson"; -import { StorageValue } from "zustand/middleware"; - -interface BearState { -// ... -} -//... - - storage: { - getItem: (name) => { - const str = localStorage.getItem(name); - if (!str) return null; - return { - state: superjson.parse>(str).state, - }; - }, - setItem: (name, value) => { - localStorage.setItem(name, superjson.stringify(value)); - }, - removeItem: (name) => localStorage.removeItem(name), - } -``` From eb37b2847f6aebd6f32b2ee1fe4c250945769c3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B6=8C=EC=8B=A0=ED=95=99?= Date: Tue, 31 Oct 2023 02:20:28 +0900 Subject: [PATCH 4/4] docs: Update variable name to example name and separate storage as const --- docs/integrations/persisting-store-data.md | 57 ++++++++++++++-------- 1 file changed, 37 insertions(+), 20 deletions(-) diff --git a/docs/integrations/persisting-store-data.md b/docs/integrations/persisting-store-data.md index d545265d07..95fb8674ab 100644 --- a/docs/integrations/persisting-store-data.md +++ b/docs/integrations/persisting-store-data.md @@ -635,30 +635,47 @@ If you're using a type that JSON.stringify() doesn't support, you'll need to wri For example, [Superjson](https://github.com/blitz-js/superjson) can serialize data along with its type, allowing the data to be parsed back to its original type upon deserialization ```ts -import superjson from "superjson"; // can use anything: serialize-javascript, devalue, etc. -import { StorageValue } from "zustand/middleware"; +import superjson from 'superjson' // can use anything: serialize-javascript, devalue, etc. +import { PersistStorage } from 'zustand/middleware' interface BearState { - ...: Map; - ...: Set; - ...: Date, - ...: RegExp; + bear: Map + fish: Set + time: Date + query: RegExp } -//... - storage: { - getItem: (name) => { - const str = localStorage.getItem(name); - if (!str) return null; - return { - state: superjson.parse>(str).state, - }; - }, - setItem: (name, value) => { - localStorage.setItem(name, superjson.stringify(value)); - }, - removeItem: (name) => localStorage.removeItem(name), - } +const storage: PersistStorage = { + 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), +} + +const initialState: BearState = { + bear: new Map(), + fish: new Set(), + time: new Date(), + query: new RegExp(''), +} + +export const useBearStore = create()( + persist( + (set) => ({ + ...initialState, + // ... + }), + { + name: 'food-storage', + storage, + } + ) +) ``` ### How can I rehydrate on storage event