Best way to initialize state using asynchronous data

[buiducnhat]

Hi everyone, I am new to valtio. And currently I want to apply it to my chrome extension.

Then I want to persist some data into extension storage, and of course I reference this guide https://github.com/pmndrs/valtio/blob/main/docs/how-tos/how-to-persist-states.mdx.

But following the guide, localStorage.getItem() is a synchronous function, it's easy to implement, not like chrome.storage.local.get(), it return a promise.

So I want to know how you guys will handle this case, thank you so much!

[dai-shi]

Two options:

1. Put undefined as initial value and set it afterwards.
2. Put a promise as initial value.

Sorry for the rough answer. Hope someone else can help!

[buiducnhat]

Thanks, I am using fallback data, the same way like undefined!

[overthemike]

// state.js
import { proxy, subscribe } from 'valtio'

const emptySymbol = Symbol('Empty Value')

// First create a proxy with default values
export const state = proxy({
  isLoaded: false, // optional
  foo: emptySymbol
})

// Then load the stored values asynchronously
chrome.storage.local.get(['foo'], (result) => {
  if (result.foo) {
    const storedState = JSON.parse(result.foo)
    // Update the proxy with stored values
    Object.assign(state, storedState)
  }

  // state is loaded, so we can tell our application to use the values
  state.isLoaded = true
})

// Set up subscription to persist changes
subscribe(state, () => {
  chrome.storage.local.set({ foo: JSON.stringify(state) })
})

// component.js
import { useSnapshot } from 'valtio'
import { state } from './state.js'

const App = () => {
  const snap = useSnapshot(state)
  
  if (!snap.isLoaded) {
    return <p>Loading</p>
  }
  
  return (
    <p>{state.foo}</p>
  )
}

[overthemike]

I like using symbols for empty values but to each their own. You could just use an empty string or object or whatever else your data structure uses.

[buiducnhat]

Thanks, I am doing the same way, that's the fallback data. Maybe it's the best approach now

[overthemike]

Just updated it with an example using a component. Reach back out if you have any issues! Good luck.