What are some ways to make autorun compatible with runInAction in mobx?

Question

What are some ways to make autorun compatible with runInAction in mobx?

Currently delving into the world of mobx and runInAction, facing a challenge in comprehending why autorun fails to trigger my callback in this particular scenario:

class ExampleClass {

    // constructor() {
    //     this.exampleMethod();
    // }

    @observable myBoolean = false;

    async exampleMethod() {

        await new Promise(resolve => setTimeout(resolve, 1000));
        runInAction(() => this.myBoolean = true); // <--- myBoolean: true never gets logged to the console. why?
        await new Promise(resolve => setTimeout(resolve, 3000));
        runInAction(() => this.myBoolean = false); // <--- still not being logged
    }
}

let example = new ExampleClass();

example.exampleMethod();
autorun(() => console.log("myBoolean:", example.myBoolean));

Employing TypeScript and babel alongside decorators.

My understanding dictates that runInAction(...) aids in modifying observables when outside of an action-marked method?

What could be causing the malfunction in my script?

javascript typescript observable mobx

Answer 1

Answer №1

If you are working with MobX version 6, there have been some changes to the API. Now, in order to properly utilize it, you must include either makeAutoObservable or makeObservable within the constructor like this:

import { autorun, makeAutoObservable, observable, runInAction } from 'mobx';

class FooClass {
  constructor() {
    makeAutoObservable(this);

    autorun(() => console.log('myBool:', this.myBool));
    this.fooMethod();
  }

  // If you use `makeAutoObservable`, you can actually remove the decorator here
  @observable myBool = false;

  async fooMethod() {
    await new Promise((r) => setTimeout(r, 1000));
    runInAction(() => (this.myBool = true)); // This will be logged now
    await new Promise((r) => setTimeout(r, 3000));
    runInAction(() => (this.myBool = false)); // This will also be logged now
  }
}

new FooClass();

Check out the example on Codesandbox

For more information, refer to the official documentation

Answer 2

If you are working with MobX version 6, there have been some changes to the API. Now, in order to properly utilize it, you must include either makeAutoObservable or makeObservable within the constructor like this:

import { autorun, makeAutoObservable, observable, runInAction } from 'mobx';

class FooClass {
  constructor() {
    makeAutoObservable(this);

    autorun(() => console.log('myBool:', this.myBool));
    this.fooMethod();
  }

  // If you use `makeAutoObservable`, you can actually remove the decorator here
  @observable myBool = false;

  async fooMethod() {
    await new Promise((r) => setTimeout(r, 1000));
    runInAction(() => (this.myBool = true)); // This will be logged now
    await new Promise((r) => setTimeout(r, 3000));
    runInAction(() => (this.myBool = false)); // This will also be logged now
  }
}

new FooClass();

Check out the example on Codesandbox

For more information, refer to the official documentation

What are some ways to make autorun compatible with runInAction in mobx?

Answer №1

Similar questions

I am currently in the process of cross-referencing the tags that have been retrieved with those that have been selected or created. If a tag does not exist

What is the best way to restrict the input year on @mui/x-date-pickers to a certain range?

Utilize jQuery to track and record AdWords conversions

"Positioned at the top of the page is the alert box, with the

AngularJs input field with a dynamic ng-model for real-time data binding

Send properties to the component container

Is there a way to send URL variables to express.js similar to how it's done in PHP?

How to fetch images from a database in CodeIgniter by utilizing JSON and AJAX functions?

Assign object properties to a constant variable while validating the values

React Scroll and Material-UI button active link not functioning correctly

How to verify the parent nodes in a jstree

Upon transitioning from typescript to javascript

utilizing javascript once form elements are dynamically inserted

Retrieve information from api and showcase it in html

Removing data based on various criteria in Prisma

Exploring the Potential of Using ngIf-else Expressions in Angular 2

Oops! The Route.get() function in Node.js is throwing an error because it's expecting a callback function, but it received

Directing users to varying pages based on a particular criteria

Angular is encountering a circular dependency while trying to access a property called 'lineno' that does not actually exist within the module exports

Why is it that a static variable cannot be accessed using the `this` keyword in a static method when the static method is called in any route's controller in NODEJS?