Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: update documentation of persist #2147

Merged
merged 4 commits into from
Nov 1, 2023
Merged

docs: update documentation of persist #2147

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8fdfe3a
docs: update documentation of persist
cheatkey Oct 24, 2023
0bb6035
docs: fix spelling documentation of persist
cheatkey Oct 25, 2023
84f202d
docs: Apply feedback by moving content under custom storage engine an…
cheatkey Oct 26, 2023
eb37b28
docs: Update variable name to example name and separate storage as const
cheatkey Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions docs/integrations/persisting-store-data.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, string>;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of an ellipsis, use some example names, like "bears", "fish", "time", "query", or something like that.

...: Set<string>;
...: Date,
...: RegExp;
}
//...

storage: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrap it with const storage: StateStorage = {} and add necessary imports.

getItem: (name) => {
const str = localStorage.getItem(name);
if (!str) return null;
return {
state: superjson.parse<StorageValue<BearState>>(str).state,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if you need to return { state: superjson.parse().state }, or if you could just return superjson.parse().state, without wrapping it in an object?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to wrap it in an object. The result of superjson.parse returns the original json, so you can return the result of the superjson.parse function directly.
I have updated the example code accordingly

};
},
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,
Expand Down
Loading