Use atoms that are created on the fly

[fenprace]

I am using class to organise several atoms. And I have some atom configs that are created on the fly:

class Foo {
  flyAtom = atom('some value');
}

class Bar {
  foo: null | Foo = null;

  async initialize() {
    // do something
    this.foo = new Foo();
  }
}

In this case, I cannot call useAtomValue directly in my component:

const bar = new Bar();
// in component:
const fly = useAtomValue(bar.foo?.flyAtom); // does not work, bar.foo is null initially

A workaround I can think of:

const DEFAULT_FLY_ATOM = atom(null);
// in component:
const fly = useAtomValue(bar.foo?.flyAtom ?? DEFAULT_FLY_ATOM);

This workaround works well to me. However I still would like to know if there is a better solution in my situation.

[dai-shi]

If it works, it looks okay. Note that it's not reactive to initialize().

[fenprace]

Thanks! I understand that if I want reactivity I need to make foo an atom, and probably update it in initialize() through store.set().