Svelte subscribe to changes using github.com/joshnuss/svelte-local-storage-store

Question

I am quite new to Svelte coming from an IOS background. I am currently trying to build a fairly simple application and am going around in circles trying to get my values to auto update when they are changed in my firebase database. My current code uses 3 pages and works to get the initial value but, anything I seem to try to get it to be reactive crashes my application. Could any of you helpful lot explain how to change my code to get it to work please? My code so far:

getter.js

import { assignedUser } from "@stores/persistedStore";

 async function getUser(thisUser) {

    const docRef = doc(db, "userData", thisUser);
    const userSnapshot = await getDoc(docRef);
    const theUser = userSnapshot.data();

    assignedUser.set({
        theUser
    })

 
}

export { getUser };

persistedStore.js

import { persisted } from 'svelte-persisted-store'


// single user details
export const assignedUser = persisted('assignedUser', {})

+page.svelte

 <script>
import { get } from 'svelte/store' 
 import { assignedUser } from "@stores/persistedStore";

 const singleUser = get(assignedUser);
 </script>

 <div>{singleUser.theUser.userWeight}</div>

This code displays my users weight perfectly and persists across the pages as it should. I obviously need this to be reactive though without having to refresh the page. I know this is done through the subscribe method but am unsure of how to implement this properly? Could someone please point me in the right direction?

Thanks in advance

Answer 1

Should just be as simple as this. Reading it directly using the $ should update it when it changes without any additional interaction needed.

<script>
    import { assignedUser } from "@stores/persistedStore";
</script>

<div>{$assignedUser.theUser.userWeight}</div>