Why makeAutoObservable doesn't work?

[it-efrem]

Hi!
It my hook:

import {action, makeAutoObservable, observable} from "mobx"

export const Status = {
  NOT_USED_YET: 'NOT_USED_YET',
  PENDING: 'PENDING',
  READY: 'READY',
  ERROR: 'ERROR',
};

export const useStatus = ({
                            value: initial_value,
                            status: initial_status
                          } = {}) => {
  // ToDo: use autobind for methods

  const symbol_value = Symbol("value")
  const symbol_status = Symbol("status")

  function createGetters(value) {
    if (value !== undefined) {
      Object.entries(value).forEach(([prop_name, value]) => {
        if (this[prop_name] === undefined) {
          Object.defineProperty(this, prop_name, {
            get: function () {
              if (this[symbol_value] !== undefined) {
                return this[symbol_value][prop_name]
              } else {
                return undefined
              }
            }
          })
        }
      })
    }
  }

  const obj = {
    [symbol_value]: initial_value,
    [symbol_status]: initial_status,

    get isNotUsed() {
      return this[symbol_status] === Status.NOT_USED_YET
    },
    get isPending() {
      return this[symbol_status] === Status.PENDING
    },
    get isReady() {
      return this[symbol_status] === Status.READY
    },
    get isError() {
      return this[symbol_status] === Status.ERROR
    },

    set(newStatus, newValue) {
      this.setStatus(newStatus);
      this[symbol_value] = newValue;
      createGetters.call(this, newValue)
    },
    setValue(newValue) {
      this[symbol_value] = newValue
      createGetters.call(this, newValue)
    },
    setStatus(newValue) {
      // ToDo: enum check
      this[symbol_status] = newValue
    },
    reset() {
      this[symbol_value] = initial_value;
      this[symbol_status] = initial_status;
    }
  }

  // constructor
  createGetters.call(obj, obj[symbol_value])

  return observable(obj) // <-- attention here
};

With return observable(obj) it work
With return makeAutoObservable(obj) it doesn't work
There are no errors, just React does not respond to change

Please, tell me, what could be the problem?

[danielkcz]

The makeAutoObservable is purely for class stores. You can't use it like this. The observable call is correct here.

So the question is why do you need it. Is there some problem that observable doesn't solve for you?

[it-efrem]

@FredyC Why only for classes?
https://mobx.js.org/observable-state.html#makeobservable
"Note that classes can leverage makeAutoObservable as well. The difference in the examples just demonstrate how MobX can be applied to different programming styles."

[it-efrem]

I just want to pass an object to a function and not specify the properties second argument like action, computed, ...

[it-efrem]

As I thought, it's all about Symbol:

It doesn't work:

  const symbol_value = Symbol("value")
  const symbol_status = Symbol("status")

It work:

  const symbol_value = "value" //Symbol("value")
  const symbol_status = "status" //Symbol("status")

[it-efrem]

@FredyC I created issue - #2627

[it-efrem]

Okay, I recreated - #2628