Should assignment to a observable value become an observable?

[wegry]

Hey, we're currently using mobx versions like this https://codesandbox.io/s/zealous-volhard-20zt1?file=/src/App.tsx.

Should assigning regular object to a proxied observable create make the newly assigned object observable?

It seems like in this example, the assigned value has lost its observability (observerness)?

[urugator]

Should assigning regular object to a proxied observable create make the object observable?

If you assign non-observable plain object to observable object, it's automatically copied and converted to observable.
store.foo = { x: 1 } is same as store.foo = observable({ x: 1 })
The behavior can be modified with observable.ref annotation or deep: false option.
Not sure if that's what you're asking about.

[wegry]

@urugator I think you answered my question.

My code sandbox shows that isn't happening though, I think. The console.debugs after updates aren't proxied objects. Unless proxied objects console.debug without the proxy at the top level.

class Store {
  currentInstance: { foo: string } & Record<string, undefined | string> = {
    otherField: "so defined",
    foo: "so defined"
  };
  constructor() {
    makeObservable(this, { currentInstance: observable });
  }
}

export default observer(function App() {
  const localObservable = useLocalObservable(() => new Store());

  useEffect(() => {
    runInAction(() => {
      localObservable.currentInstance = {
        foo: new Date().toISOString()
      };
    });
    console.debug(
      "inside the interval",
      localObservable.currentInstance,
      localObservable.currentInstance.foo
    );
  }, []);

  console.debug(
    "outside the interval",
    localObservable.currentInstance,
    localObservable.currentInstance.foo
  );

logs

outside the interval 

    {otherField: "so defined", foo: "so defined"}

so defined 
inside the interval 

    {foo: "2021-04-08T16:09:32.534Z"}

2021-04-08T16:09:32.534Z 
outside the interval 

    {foo: "2021-04-08T16:09:32.534Z"}

2021-04-08T16:09:32.534Z 

Maybe I'm using the annotation incorrectly in the constructor though.

[mweststrate]

@wegry that output looks correct to me? Did you expect something else?

[wegry]

@mweststrate when we log observable fields locally, they're usually Proxys and not the wrapped object without using toJS.

Maybe we're misconfigured though. We don't support IE 11 or use decorators.

edit: tweaking the browserlist in the code sandbox's package.json to not support IE 11 now console.debugs the top level proxy like how our local setup works.

[mweststrate]

ok but that looks like a different tool? I think you are now debugging differences between console.debug implementations, not differences in MobX? Given that your component is re-rendering after the effect seems an indication that everything is ok. You can use reflection utilities like isObservableObject to be sure (whether an object is a Proxy or not is in principle unobservable from JS, so a tool like code sandbox is technically not even able to tell you whether it is a proxy or not)

[wegry]

I think you are now debugging differences between console.debug implementations, not differences in MobX?

It was an errant browserslist setting in the package.json containing IE 11 support. My mistake. The proxy is logging as expected now.

@mweststrate thanks for pointing us toward isObservableObject, hadn't seen that yet.

A little bit more context is we have a relatively deeply nested object coming back from https://github.com/rjsf-team/react-jsonschema-form.

diff --git a/file.tsx b/file.tsx
--- a/file.tsx
+++ b/file.tsx
   const onChange = useCallback(
     (val: any) => {
       tweakOnChange?.({ value: val, schema })
-      modelStore.currentModelInstance = val
+     Object.assign(modelStore.currentModelInstance, val)
     },
     [modelStore, schema, tweakOnChange]
   )

Without the Object.assign, assigning the variable val (which isn't observable) to modelStore.currentModelInstance (which should be observable), doesn't seem to trigger an update.

[mweststrate]

It sounds like your currentModelInstance field itself is not marked as observable, or that reference is being read by a component that is not an observer.

…

On Thu, Apr 8, 2021 at 5:45 PM Zach Wegrzyniak ***@***.***> wrote: I think you are now debugging differences between console.debug implementations, not differences in MobX? It was an errant browserslist setting in the package.json containing IE 11 support. My mistake. The proxy is logging as expected now. @mweststrate <https://github.com/mweststrate> thanks for pointing us toward isObservableObject, hadn't seen that yet. A little bit more context is we have a relatively deeply nested object coming back from https://github.com/rjsf-team/react-jsonschema-form. diff --git a/file.tsx b/file.tsx--- a/file.tsx+++ b/file.tsx const onChange = useCallback( (val: any) => { tweakOnChange?.({ value: val, schema })- modelStore.currentModelInstance = val+ Object.assign(modelStore.currentModelInstance, val) }, [modelStore, schema, tweakOnChange] ) Without the Object.assign, assigning the variable val (which isn't observable), doesn't seem to trigger an update. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2879 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBGW73HLAOTYXQ7ZPMLTHXMUHANCNFSM42TAQ5LA> .