Tukukkk

I'm very new to mobx and unsure, how to use it properly. I'm used to OO, so I prefer using the class keyword and I found myself writing the following singleton class:

// @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

    auth: observable,

})



decorate(Auth, {

    setEmail: action,

})



export {auth}

I myself find it pretty strange, nonetheless it seems to work.

• P1: This is actually wrong as I wanted to use an arrow function, so that this is bound to the current instance. I'm about to change it, but I'm leaving it here hoping for an explanation why it works.


• P2: This is a hack used to decorate all members of auth as observable. AFAIK the decoration marks all members recursively, which is about what I wanted (marking setEmail is superfluous, but AFAIK harmless).

I'm perfectly sure that this isn't the best piece of code and I'll gladly improve it. I'd prefer to preserve the class-syntax, if it makes any sense, but I'm open to all kinds of changes.