mobx react action binding

问题

For those who has written apps with mobx + react, I'm wondering if there's a better way to handle context issue (eg. this. returns undefined in mobx store) when using onClick event handler inside a react component w/ inject & observer.

I have been writing the handler like onClick={actionFromStore.bind(this.props.theStore)} to resolve that issue, but it seems like there should be more concise way to do this that I'm not aware of.

I'm not a mobx expert, any advice would be appreciated!

The actions here are async fetch requests

回答1:

You can either use @action.bound decorator:

@action.bound
doSomething(){

    // logic

}

or use labmda function which will preserve the context:

@action
doSomething = ()=> {

    // logic

}

回答2:

Since there is 2018, the best practice in React apps development is to use lambda functions as class properties instead of class methods.

The lambda function as class property resolves all issues that can happen with context. You don't have to bind methods to the specific context, if using it.

For example, you working with this in some class method:

export default class SomeClass {
    myProp = "kappa"

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

In this case, if you will use it, e.g., like some event listener, this will be unexpectedly (actually, more than expected) change from SomeClass instance to other value. So, if you using class methods, you should modify you code like this:

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

    myProp = "kappa"

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

In constructor you are binding your class method to context of SomeClass instance.

The best way to avoid this kind of unnecessary code (imagine, that you have 10+ of this type of methods - and you should bind each of them), is to simply use lambda functions:

export default class SomeClass {
    myProp = "kappa"

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

That's it! Lambda functions have no context, so this will always point to the SomeClass instance. So, now you can decorate you class property as you wish:

export default class SomeClass {
    myProp = "kappa"

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

Note, that if you are using Babel, you have to use transform-class-properties plugin.

This question is more related to the core of JavaScript, so I advise you to read this MDN article for more information about this behavior.

Hope, this was helpful!

来源：https://stackoverflow.com/questions/54121988/mobx-react-action-binding

标签

reactjs

mobx

mobx-react