javascript – Using mobx for a trivial singleton

I am very new to mobx and insecure, how to use it correctly. I'm used to OO, so I prefer to use the class keyword and I found myself writing the following class of singleton:

// @flow
import {decorate, observable, action} from "mobx"

class Auth {
email: string = ""
authorization: string = ""

setEmail (email: string) {// P1
this.email = email
}
}

const auth = new Auth ()

decorate ({dummy: auth}, {// P2
authentication: observable,
})

decorate (aut, {
setEmail: action,
})

export {auth}

I find it very strange myself, however, it seems to work.

  • P1: This is really wrong, since I wanted to use an arrow function, so that is It is linked to the current instance. I'm about to change it, but I leave it here waiting for an explanation of why it works.
  • Q2: This is a trick used to decorate all the members of authentication as observable. AFAIK decoration marks all members recursively, which is what I wanted (mark setEmail It's superfluous, but AFAIK is harmless.)

I am perfectly sure that this is not the best code and I will gladly improve it. I would prefer to preserve the class syntax, if it makes any sense, but I am open to all kinds of changes.