Question: even if I know that inheritance is discouraged and composition should be better I'd like to know how to handle inheritance with mobx state class and call a super class method that is already decorated with `@action.bound`.

I have this code example (that can be easily executed in a comfortable [jsfiddle](https://jsfiddle.net/2u21nbpp/1/)):

```
const { observable, action } = mobx;

class Store {
    @observable list = []
  @observable num = 0

  constructor() {
    console.log('Store ctor')
  }

  @action.bound
  reset() {
    this.list.clear()
    this.num = 0
  }
}

class StorePlus extends Store {
    @observable num2 = 0

  constructor() {
    super()
   }

   @action.bound
   reset() {
    super.reset()
    this.num2 = 0
   }
}

const storePlus = new StorePlus()
storePlus.reset()

```

Is is broken due to this error:

> 
> Uncaught RangeError: Maximum call stack size exceeded
> 
> 
> 

I understand the problem is in calling `super.reset` where `reset` is a super class method already decorated. But I don't understand internals and I don't know what is the best way to use composition over inheritance avoiding to write some adapter methods to expose parent class observables and actions method.

Hope my question is clear!

Answer: 
I'm not sure why exactly, but the issue is the `action.bound`.

If you bind `this` in the constructor and wrap the result in action (like this... `this.reset = action(this.reset.bind(this)`), then it appears to work okay.

<https://jsfiddle.net/cr82ktdd/>

```
const { observable, action } = mobx;
console.clear()

class Store {
  @observable list = []
  @observable num = 0

  constructor() {
    console.log('Store ctor')

    this.reset = action(this.reset.bind(this))
  }

  reset() {
    console.log('Store reset')
    this.list.clear()
    this.num = 0
  }
}

class StorePlus extends Store {
    @observable num2 = 0

  constructor() {
    super()

    this.reset = action(this.reset.bind(this))
   }

   reset() {
    console.log('StorePlus reset')
    super.reset()
    this.num2 = 0
   }
}

const storePlus = new StorePlus()
storePlus.reset()

```
The problem is that you can't reassign the action, which has already been bounded
JavaScript doesn't support binding several contexts to the same function.
Remove **bound** and make a bind separately

`const storePlus = new StorePlus()
storePlus.reset = storePlus.reset.bind(storePlus)
storePlus.reset()`