CODEWITHSUNDEEP
reactjsmobxmobx-react
Svyat
Svyat

Reputation: 92

MobX. @observable works but @computed don't

I have the following code: It works fine if _isFavorite variable is public observable. But once I change it to @computed, it triggers only once. But further @action callings don't trigger @computed.

This works fine, once isFarovite is changed:

class Cat {
    @observable public isFavorite = false;

    constructor() { ... }

    @action public toggleFavorite() {
        this.isFavorite = !this.isFavorite;
    }
}

This doesn't work if _isFavorite is changed:

class Cat {
    private _isFavorite = false;

    constructor() { ... }

    @computed public get isFavorite() {
        return this._isFavorite;
    }

    @action public toggleFavorite() {
        this._isFavorite = !this._isFavorite;
    }
}

I think I might miss the core concept of how "computed" works, but I can't figure out how I should change my code...

Upvotes: 0

Views: 1061

Answers (1)

felixmosh
felixmosh

Reputation: 35473

This because computed value should be applied on some observables.

It actually checks which observables are used inside of it, and register itself as an observer of it & caches the result. 

class Cat {
    @observable private _isFavorite = false;

    constructor() { ... }

    @computed public get isFavorite() {
        return this._isFavorite;
    }

    @action public toggleFavorite() {
        this._isFavorite = !this._isFavorite;
    }
}

Upvotes: 1

Related Questions