Mobx 6

1. Overview

• Become compatible with standard modern JavaScript - Dropping Decorators Syntax
• Mobx will work out of the box in most setups version
• Proxy and non-proxy in the same version
• Reduce bundle size - By removing decorators
• Enable strict mode by default - all observables must be updated through actions

2. Decorators

2.1 makeObservable

• A function that receives a target, annotations, and options object
• Usually, the target will be "this" inside the constructor class
• Annotations is an object with key as the property name and value as the functionality we want, for example "{name: observable}"
• if used in subclass or superclass, each of the classes will need to call "makeObservable" again
  • For example, if we inherit from a class that uses make observable, we will need to call again, makeObservable.
• Needs to be called after the properties are declared

import { makeObservable, observable, action, computed, autorun } from "mobx";

class Person {
    id: number = 1;
    name: string;

    constructor(name: string) {
        this.name = name;
        makeObservable(this, {
            name: observable,
            updateName: action,
            coolName: computed
        });
    }

    updateName(newName: string) {
        this.name = newName;
    }

    get coolName() {
        return `im cool ${this.name}`;
    }
}

const newPerson = new Person("Georgy");

autorun(() => {
    console.log(newPerson.coolName);
});

newPerson.updateName('New Name');

2.2 MakeAutoObservable

• A function that receives a target, overrides, and the options object
• Cannot be used on sub-class or classes with super call
• converts everything automatically by the next rules:
  • Any (inherited) member that is a generator function will be annotated with flow
  • Any (inherited) member that contains a function value will be annotated with autoAction
  • Any getter will be annotated with computed
  • Any other own field will be marked with observable
  • Members marked with false in the overrides argument will not be annotated. Use this for, for example, read-only fields such as identifiers.

import { makeAutoObservable, observable, action, computed, autorun } from "mobx";

class Person {
    id: number = 1;
    name: string;

    constructor(name: string) {
        this.name = name;
        makeAutoObservable(this, {
            id: false,
        });
    }

    updateName(newName: string) {
        this.name = newName;
    }

    get coolName() {
        return `im cool ${this.name}`;
    }
}

const newPerson = new Person("Georgy");

autorun(() => {
    console.log(newPerson.coolName);
});

newPerson.updateName('New Name');

2.3 How to use Decorators

• We can still use decorators, but it is not recommended in the new codebase
• We will need to use "makeAutoObservable" inside the class constructor
• We will need to enable the "experimentalDecorators" flag like before, and a new flag "useDefineForClassFields"

3. Reference

mobx.js.org/observable-state.html#makeobservable