archive-gh-me/zustand
1
0
Fork 0
mirror of https://github.com/pmndrs/zustand.git synced 2025-12-08 19:45:52 +00:00
Code Issues Projects Releases Wiki Activity

fix(docs): errors and types fix for URL state example (#2218)

Browse Source 
* Update connect-to-state-with-url-hash.md

Resolved a few errors and type errors in the persist and create state with URL example:

1. createJsonStorage not being called in storageOptions resulting in a type error.
2. Correct hook not being exported
3. Moved the creation of initial state inline to get the correct types passed from create/persist.
4. Used state type as generic for persist.

* yarn prettier run

* Update docs/guides/connect-to-state-with-url-hash.md

Better name for state in setter

Co-authored-by: Danilo Britto <dbritto.dev@gmail.com>

* prettier run

---------

Co-authored-by: Danilo Britto <dbritto.dev@gmail.com>
Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>
This commit is contained in:
Cody Partington 2024-01-01 00:29:34 +11:00 committed by GitHub
parent 517524d2b0
commit 4be1e9eb4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
docs/guides/connect-to-state-with-url-hash.md
View File

@ -71,10 +71,10 @@ const persistentStorage: StateStorage = {
if (getUrlSearch()) {
const searchParams = new URLSearchParams(getUrlSearch())
const storedValue = searchParams.get(key)
return JSON.parse(storedValue)
return JSON.parse(storedValue as string)
} else {
// Otherwise, we should load from localstorage or alternative storage
return JSON.parse(localStorage.getItem(key))
return JSON.parse(localStorage.getItem(key) as string)
}
},
setItem: (key, newValue): void => {
@ -82,7 +82,7 @@ const persistentStorage: StateStorage = {
if (getUrlSearch()) {
const searchParams = new URLSearchParams(getUrlSearch())
searchParams.set(key, JSON.stringify(newValue))
window.history.replaceState(null, null, `?${searchParams.toString()}`)
window.history.replaceState(null, '', `?${searchParams.toString()}`)
}
localStorage.setItem(key, JSON.stringify(newValue))
@ -94,24 +94,33 @@ const persistentStorage: StateStorage = {
},
}
let localAndUrlStore = (set) => ({
typesOfFish: [],
addTypeOfFish: (fishType) =>
set((state) => ({ typesOfFish: [...state.typesOfFish, fishType] })),
numberOfBears: 0,
setNumberOfBears: (newNumber) =>
set((state) => ({ numberOfBears: newNumber })),
})
let storageOptions = {
name: 'fishAndBearsStore',
storage: persistentStorage,
type LocalAndUrlStore = {
typesOfFish: string[]
addTypeOfFish: (fishType: string) => void
numberOfBears: number
setNumberOfBears: (newNumber: number) => void
}
const useLocalAndUrlStore = create(persist(localAndUrlStore, storageOptions))
const storageOptions = {
name: 'fishAndBearsStore',
storage: createJSONStorage<LocalAndUrlStore>(() => persistentStorage),
}
export default localAndUrlStore
const useLocalAndUrlStore = create(
persist<LocalAndUrlStore>(
(set) => ({
typesOfFish: [],
addTypeOfFish: (fishType) =>
set((state) => ({ typesOfFish: [...state.typesOfFish, fishType] })),
numberOfBears: 0,
setNumberOfBears: (numberOfBears) => set(() => ({ numberOfBears })),
}),
storageOptions,
),
)
export default useLocalAndUrlStore
```
When generating the URL from a component, you can call buildShareableUrl: