Use persisted for a store of stores

[thelegendtubaguy]

Hey there, I'm trying to use this to persist a store of stores. This is kind of working, I see the store show up in application storage. But updates to the nested stores are not persisting to storage and I also don't see an initial value I would expect.

This gets a little complicated, so my apologies for the wall of text.

Here's my store of stores:

function createAllConnectionsStore() {
	const { subscribe, update } = persisted<AllConnectionsStore>('allConnections', {})

	function addConnection(name: string, connection: ConnectionStore) {
		update((stores) => {
			return { ...stores, [name]: connection }
		})
		connection.subscribe((updatedConnection) => {
			update((stores) => {
				return { ...stores, [name]: connection }
			})
		})
	}

	return {
		subscribe,
		update,
		addConnection
	}
}

const allConnectionsStore = createAllConnectionsStore()

And here's my nested store:

export default function serviceConnectionStore(): ConnectionStore {
	const store = writable<ConnectionWritableStore>({
		service: 'someservice',
		status: 'initial'
	})

	function getService(): string {
		return get(store).service
	}

	function getStatus(): 'initial' | 'creating' | 'checking' | 'ok' | 'warn' | 'error' {
		return get(store).status
	}

	function getAccountName(): string | undefined {
		return get(store).accountName
	}

	function createServiceConnectionStore(store: Writable<ConnectionWritableStore>) {
		function sleep(ms: number) {
			return new Promise((resolve) => setTimeout(resolve, ms))
		}

		async function createConnection(cred: ConnectionCred) {
			console.log(`Create connection with code: ${cred.code}`)
			await sleep(2000)
			store.update((store) => {
				return { ...store, accountName: 'TestAccount' }
			})
			await sleep(2000)
			store.update((store) => {
				return { ...store, status: 'ok' }
			})
		}

		return {
			...store,
			createConnection,
			getService,
			getAccountName,
			getStatus
		}
	}

	const serviceConnectionStore = createServiceConnectionStore(store)

	allConnectionsStore.addConnection('new', serviceConnectionStore)

	return serviceConnectionStore
}

When I use this in my page like:

serviceConnectionStore().createConnection({ code })

I see updates on my page which is subscribed to the allConnectionsStore. That all works like I'd expect. But in application storage I see:

allConnections | {"new":{}}

I never see my updates to the serviceConnectionStore come through to application storage.

Anybody see what I'm doing wrong?

[joshnuss]

Hi @thelegendtubaguy,

Would it be possible to create a repo with a minimal reproduction?

Simplifying your question helps a lot because I have many inbound questions and my time is limited.