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

* 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 <[email protected]>

* prettier run

---------

Co-authored-by: Danilo Britto <[email protected]>
Co-authored-by: Daishi Kato <[email protected]>

Author: 3 people

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

@@ -71,18 +71,18 @@ 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 => {
     // Check if query params exist at all, can remove check if always want to set URL
     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 })),
-})
+type LocalAndUrlStore = {
+  typesOfFish: string[]
+  addTypeOfFish: (fishType: string) => void
+  numberOfBears: number
+  setNumberOfBears: (newNumber: number) => void
+}
 
-let storageOptions = {
+const storageOptions = {
   name: 'fishAndBearsStore',
-  storage: persistentStorage,
+  storage: createJSONStorage<LocalAndUrlStore>(() => persistentStorage),
 }
 
-const useLocalAndUrlStore = create(persist(localAndUrlStore, storageOptions))
+const useLocalAndUrlStore = create(
+  persist<LocalAndUrlStore>(
+    (set) => ({
+      typesOfFish: [],
+      addTypeOfFish: (fishType) =>
+        set((state) => ({ typesOfFish: [...state.typesOfFish, fishType] })),
+
+      numberOfBears: 0,
+      setNumberOfBears: (numberOfBears) => set(() => ({ numberOfBears })),
+    }),
+    storageOptions,
+  ),
+)
 
-export default localAndUrlStore
+export default useLocalAndUrlStore
 ```
 
 When generating the URL from a component, you can call buildShareableUrl: