MobX Autorun und Reaktion innerhalb Konstruktor

Question

Sie Autorun und Reaktion innerhalb des Konstruktor sein müssen, um zu arbeiten? Kann ich dieses einfache Beispiel ohne Konstruktor schreiben?

Auch der Code, den ich in der Autorun haben läuft normal, aber wenn ich es console.log(this.expenses) ändern funktioniert es nicht. Warum das?

import { observable, action, computed, useStrict, autorun, reaction } from 'mobx' 
useStrict(true) 

class ExpensesStore { 

    @observable.shallow expenses = [] 

    @action addExpense = (expense) => { 
    this.expenses.push(expense) 
    } 

    @computed get getExpense() { 
    if(this.expenses.length > 0) { 
     return `This is computed from ${this.expenses[0] + this.expenses[1]}` 
    } 

    } 


    constructor() { 
    autorun(() => { 
     console.log(`${this.expenses}`) 
    }) 

    reaction(
    ()=>this.expenses.map(expense => expense), expense => console.log(expense) 
    ) 
    } 


} 

const store = window.store= new ExpensesStore() 

export default store 

Answer 1

Autorun und Reaktion muss nicht im Konstruktor sein. Sie könnten dies zum Beispiel tun, wenn Sie bevorzugen:

Beispiel

class ExpensesStore { 
    @observable.shallow expenses = [] 

    @action addExpense = (expense) => { 
    this.expenses.push(expense) 
    } 

    @computed get getExpense() { 
    if(this.expenses.length > 0) { 
     return `This is computed from ${this.expenses[0] + this.expenses[1]}` 
    } 
    } 
} 

const store = new ExpensesStore() 

autorun(() => { 
    console.log(`${store.expenses}`) 
}) 

reaction(
() => store.expenses.map(expense => expense), expense => console.log(expense) 
) 

Der Grund, warum console.log(`${this.expenses}`) Werke und console.log(this.expenses) nicht, weil Sie nichts in Ihrem flachen Array dereferencing wenn Sie this.expenses schreiben.

Wenn Sie schreiben ...

`${this.expenses}` 

... Sie fordern implizit toString() auf this.expenses. Sie können toJS oder slice verwenden, um die gleiche Wirkung zu erhalten, wenn es nicht in einem String setzen:

Beispiel (JSBin)

class ExpensesStore { 
    @observable.shallow expenses = [] 

    @action addExpense = (expense) => { 
    this.expenses.push(expense) 
    } 

    @computed get getExpense() { 
    if(this.expenses.length > 0) { 
     return `This is computed from ${this.expenses[0] + this.expenses[1]}` 
    } 
    } 
} 

const store = new ExpensesStore() 

autorun(() => { 
    // store.expenses.slice() works just as well 
    console.log(toJS(store.expenses)) 
}) 

reaction(
() => store.expenses.map(expense => expense), expense => console.log(expense) 
) 

setTimeout(() => { 
    store.addExpense(1000) 
}, 1000)