diff --git a/app/utils/indexedDB-storage.ts b/app/utils/indexedDB-storage.ts index 51ee92b8185..da309455013 100644 --- a/app/utils/indexedDB-storage.ts +++ b/app/utils/indexedDB-storage.ts @@ -4,7 +4,8 @@ import { get, set, del, clear } from "idb-keyval"; class IndexedDBStorage implements StateStorage { public async getItem(name: string): Promise { try { - return (await get(name)) || localStorage.getItem(name); + const value = (await get(name)) || localStorage.getItem(name); + return value; } catch (error) { return localStorage.getItem(name); } @@ -12,6 +13,11 @@ class IndexedDBStorage implements StateStorage { public async setItem(name: string, value: string): Promise { try { + const _value = JSON.parse(value); + if (!_value?.state?._hasHydrated) { + console.warn("skip setItem", name); + return; + } await set(name, value); } catch (error) { localStorage.setItem(name, value); diff --git a/app/utils/store.ts b/app/utils/store.ts index 13bef6d5dfe..ff15bee14ed 100644 --- a/app/utils/store.ts +++ b/app/utils/store.ts @@ -14,9 +14,11 @@ type SecondParam = T extends ( type MakeUpdater = { lastUpdateTime: number; + _hasHydrated: boolean; markUpdate: () => void; update: Updater; + setHasHydrated: (state: boolean) => void; }; type SetStoreState = ( @@ -33,12 +35,19 @@ export function createPersistStore( persistOptions: SecondParam>>, ) { persistOptions.storage = createJSONStorage(() => indexedDBStorage); + const oldOonRehydrateStorage = persistOptions?.onRehydrateStorage; + persistOptions.onRehydrateStorage = (state) => { + oldOonRehydrateStorage?.(state); + return () => state.setHasHydrated(true); + }; + return create( persist( combine( { ...state, lastUpdateTime: 0, + _hasHydrated: false, }, (set, get) => { return { @@ -57,6 +66,9 @@ export function createPersistStore( lastUpdateTime: Date.now(), }); }, + setHasHydrated: (state: boolean) => { + set({ _hasHydrated: state } as Partial>); + }, } as M & MakeUpdater; }, ),