mobx: class method call when changing data

Question

Сan I use the Mobx library to call a class method when data changes?

For example MyObject writes container['item'] = 10 and as a result the myaction method is called.

class MyElement extends Component<any> {

    // modifiable data
    container: any = [];

    // method called when data (container) is modified
    myaction() {
        console.log('container was modified');
        console.log(this.container);
    }

    render() {
        <MyObject container = {this.container} />
    }
}

decorate(MyElement, {
    container: observable
} as any)

score 1 · Accepted Answer · answered Sep 15 '20 at 11:05

You could use reaction for example:

  container = [];

  componentDidMount() {
    // save disposer function to use later inside componentWillUnmount
    this.reactionDisposer = reaction(
      () => this.container.length,
      () => {
        console.log('container was modified')
      }
    );
  }

  // Don't forget to dispose it when unmount
  componentWillUnmount() {
    this.reactionDisposer();
  }

Codesandbox link: https://codesandbox.io/s/httpsstackoverflowcomquestions63864175-kjorh?file=/src/App.js

Also, technically you can do that with array container['item'] = 10, but I advise you not to use string keys with array. If you want to use string keys then you need to use object or a Map.

Other methods you could also use to achieve what you want:

Autorun - https://mobx.js.org/refguide/autorun.html
When (basically single use reaction) - https://mobx.js.org/refguide/when.html
Or lower level stuff like observe and intercept - https://mobx.js.org/refguide/observe.html

mobx: class method call when changing data

1 Answers1