I am removing decorators from my React Native app (too many issues with babel) and my actions are not working (the contained function does not run).

I'm translating class actions e.g.

class MyStore {
  //...

  @action 
  myAction(param) {
    //...
  }
}

To

class MyStore {
  //...

  myAction(param) {
    action("Perform action with param", (param) => {
      //...
    })
  }
}

What's the correct way to convert a class @action to the non-decorator form?

I am removing decorators from my React Native app (too many issues with babel) and my actions are not working (the contained function does not run).

I'm translating class actions e.g.

class MyStore {
  //...

  @action 
  myAction(param) {
    //...
  }
}

To

class MyStore {
  //...

  myAction(param) {
    action("Perform action with param", (param) => {
      //...
    })
  }
}

What's the correct way to convert a class @action to the non-decorator form?

• javascript
• reactjs
• react-native
• mobx
• mobx-react

Share Improve this question Follow edited Jan 17, 2017 at 10:59 Adamski asked Jan 17, 2017 at 10:49 AdamskiAdamski 3,71566 gold badges4343 silver badges7878 bronze badges 4

• Should you really use class if you are removing babel? You could do var myStore = { myAction: action(function() { ... }) };. – Tholle Commented Jan 17, 2017 at 10:58
• I see. I'm not sure how the var myStore form would look with extendObservable. – Adamski Commented Jan 17, 2017 at 11:03
• I guess they would just bee separate observable properties of the object. – Adamski Commented Jan 17, 2017 at 11:11
• You could checkout mattruby's mobx-examples for some inspiration. – Tholle Commented Jan 17, 2017 at 12:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can define action as

class MyStore {
  //...

  myAction = action(param => {
    //...
  });
}

or use runInAction()

class MyStore {
  //...

  myAction(param) {
    runInAction(() => {
      //...
    })
  }
}

What's the correct way to convert a class @action to the non-decorator form?

Decorators evaluate to function calls at runtime, so simply calling them manually would be the most straightforward thing to do. @action is a method decorator, and method decorators take the following arguments at runtime:

1. The class prototype for instance methods (constructor function for static methods)
2. The method name (property key)
3. The property descriptor of the method

With that in mind, you can simply do:

class MyStore {
    myAction(param) {
        // ...
    }
}

// Apply the @action decorator manually:
action(MyStore.prototype, "myAction");

or:

action(MyStore.prototype, "myAction", Object.getOwnPropertyDescriptor(MyStore.prototype, "myAction"));

If you do this immediately after the class declaration, the result should be pletely identical to that by using decorators, without having to use the decorator syntax.

Why not simply use makeAutoObservable?

 import { makeObservable, observable, action } from 'mobx';

class MyStore {
 someValue = 0;

  constructor() {
    makeAutoObservable(this)

  myAction(param) {
    // Your action code here
    this.someValue = param;
  }
}