MOBX реагировать действия связывания

Question

Для тех, кто написал приложения с mobx + react, мне интересно, есть ли лучший способ справиться с проблемой контекста (например, this. возвращает undefined в mobx store) при использовании onClick обработчик событий внутри реагирующего компонента w / inject & observer.

Я писал обработчик наподобие onClick={actionFromStore.bind(this.props.theStore)}, чтобы решить эту проблему, но, похоже, должен быть более краткий способ сделать это, о котором я не знаю.

Я не эксперт по mobx, любой совет был бы оценен!

Действия здесь - это асинхронные запросы на выборку

Answer 1

Поскольку наступил 2018 год, при разработке приложений React рекомендуется использовать лямбда-функции в качестве свойств класса вместо методов класса.

Лямбда-функция как свойство класса решает все проблемы, которые могут возникнуть с контекстом. Вам не нужно привязывать методы к конкретному контексту, если вы его используете.

Например, вы работаете с this в некотором методе класса:

export default class SomeClass {
    myProp = "kappa"

    myMethod() {
        console.log(this.myProp)
    }
}

В этом случае, если вы будете использовать его, например, как какой-либо прослушиватель событий, this неожиданно (фактически, больше, чем ожидалось) изменится с экземпляра SomeClass на другое значение. Итак, если вы используете методы класса, вы должны изменить свой код следующим образом:

export default class SomeClass {
    constructor() {
        this.myMethod = this.myMethod.bind(this)
    }

    myProp = "kappa"

    myMethod() {
        console.log(this.myProp)
    }
}

В конструкторе вы привязываете свой метод класса к контексту SomeClass экземпляра.

Лучший способ избежать такого ненужного кода (представьте, что у вас есть 10+ методов этого типа - и вы должны связать каждый из них), это просто использовать лямбда-функции:

export default class SomeClass {
    myProp = "kappa"

    myMethod = () => {
        console.log(this.myProp)
    }
}

Вот и все! Лямбда-функции не имеют контекста, поэтому this всегда будет указывать на экземпляр SomeClass. Итак, теперь вы можете украсить свой объект класса по своему желанию:

export default class SomeClass {
    myProp = "kappa"

    @action
    myMethod = () => {
        console.log(this.myProp)
    }
}

Обратите внимание, что если вы используете Babel, вы должны использовать плагин transform-class-properties.

Этот вопрос больше относится к ядру JavaScript, поэтому я советую вам прочитать эту статью MDN для получения дополнительной информации о this поведении.

Надеюсь, это было полезно!

Answer 2

Вы можете использовать декоратор @action.bound:

@action.bound
doSomething(){

    // logic

}

или используйте функцию labmda, которая сохранит контекст:

@action
doSomething = ()=> {

    // logic

}