Is it possible to create inheritance between two mobx stores?

Question

I'm building two widgets with mobx/react, where all the logic sits inside the stores. Both share most of the design rules, so their stores are 95% identical. Is there a smart way to handle this situation? For example, is it possible to create inheritance such as this?

class Animal { 
  @observable name = "";

  constructor(name) {
    this.name = name;
  }

  @computed get sentence() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  @observable isBarking = false;
  @computed get bark() {
    if (this.isBarking){
        console.log('The dog is barking');
    }
  }
  @action
    setIsBarking(isBarking) {
    this.isBarking = isBarking;
  }  
}

hi, did you find a solution for that? I have the same identical problem. thanks m- — Michele Dibenedetto, Jan 09 '19 at 16:59
Yes - The example I suggested works. However as a rule, you should probably avoid inheritance, unless you have a good use case. Otherwise use composition. — Sveta, Jan 10 '19 at 17:04
is there a technical reason for that? Does @observable name work as expected in this case? — Frank Schwieterman, Mar 06 '19 at 19:53

score 1 · Answer 1 · answered Jan 26 '21 at 17:05

Yes you can, but you have to structure it like this, using the new Mobx pattern which does not use decorators:

(Using Typescript)


import {observable, action, computed, makeObservable} from "mobx";

const animalProps = {
   name: observable,
   sentence: computed
};

class abstract Animal { 
  name = "";

  constructor(name) {
    this.name = name;
  }

  get sentence() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  
   isBarking = false;

   constructor(){
     makeObservable(this, {
       ...animalProps,
       isBarking: observable,
       bark: computed,
       setIsBarking: action
     });
   }
  
   get bark() {
    if (this.isBarking){
        console.log('The dog is barking');
    }
  }

    setIsBarking(isBarking) {
       this.isBarking = isBarking;
  }  
}

If you need an instance of Animal in your app, then Mobx-State-Tree is a better option. Because making a prop observable/actionable/computable twice (the parent class and the subclass) will throw an error.

score 1 · Answer 2 · answered Mar 22 '22 at 20:02

I know this was asked a long time ago at this point, but per the docs here you can override as you wrote. There are limitations though:

Only action, computed, flow, action.bound defined on prototype can be overriden by subclass.
Field can't be re-annotated in subclass, except with override.
makeAutoObservable does not support subclassing.
Extending builtins (ObservableMap, ObservableArray, etc) is not supported.
You can't provide different options to makeObservable in subclass.
You can't mix annotations/decorators in single inheritance chain.
All their standard limitations apply as well which I won't list here.

This works with the non-annotation syntax as well (e.g., makeObservable).

score 0 · Answer 3 · answered Feb 10 '18 at 21:37

Have you consider MobX State Tree (https://github.com/mobxjs/mobx-state-tree) for managing your two classes Animal and Dog ?

This will give you the powerfull compose functionality, that could be used instead of inheritance.

Here's the probably most useful part for you: "Simulate inheritance by using type composition" https://github.com/mobxjs/mobx-state-tree#simulate-inheritance-by-using-type-composition

Is it possible to create inheritance between two mobx stores?

3 Answers3

Linked