javascriptreactjsreact-nativemobxmobx-react

How to convert decorator @action to non-decorator action in MobX


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?


Solution

  • You can define action as

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

    or use runInAction()

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