Storing Classes best practices

[targetlucked69]

Howdy, what's the best way to store a javascript class using an atom for example, or any other stores, and making sure it's still reactive? Basic example here:

class SomeLibrary {
  public isLoaded: boolean = false

  load() {
    this.isLoaded = true
  }
}

const lib = new SomeLibrary()
const $libStore = atom(lib)

$libStore.subscribe((state) => {
  console.log('library', state?.isLoaded) // always `false`, how to make this reactive too?
})

lib.load()
$libStore.set(lib) // still `false`

Any help/pointers would be much appreciated!

[ai]

Sorry, there is no a beautiful way. Every store changes need to be done by store methods (store.set or store.setKey) to call listener.

You can call $libStore.notify/$libStore.set in SomeLibrary#load() or use Proxy. But all these methods looks like hacks.

[targetlucked69]

Is there an explanation on why the class object is frozen when stored in an atom even though internal properties gets updated automatically?

[ai]

Is there gonna be a chance that it's get deprecated in the future?

We do not plan to do it right now.

But note that React is not working great if you do not change object inside atom. This is why we recommend calling store.set instead of store.notify.

Also I lol'd I thought it was an "ai" who moved my issue to discussion

It’s me 😅 Old nickname inspired by Neuromancer novel before LLM hype.

[targetlucked69]

This is why we recommend calling store.set instead of store.notify.

But as you can see in my example, I'm re-setting the value after I call the load method but still didnt get updates 🤔

[ai]

$libStore.set(lib)

It doesn’t reset value, because we have newValue === oldValue check in set.

[targetlucked69]

Ah okay, and because it doesnt actually check deep equality, and a Class instance is always equal to the same Class instance

[ai]

What is your high-level task?