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

Instructions on how to make a radio button selected when clicked are as follows:

add a JavaScript variable to a JSON data structure

Struggling to locate a declaration file for the 'cloudinary-react' module? Consider running `npm i --save-dev @types/cloudinary-react` or exploring other options to resolve this issue

In Vue, props are not automatically assigned; be sure to avoid directly mutating a prop when assigning it manually to prevent errors

Develop a new object using NodeJS within a module for a function

Retrieve the date one week prior to today's date in Node.js and format it in Mysql style

Verify login availability using Javascript auto-check

Guide to automatically updating a table with AJAX requests

The event failed to initiate

`Switching the selection in ng-selected`

How to Retrieve Content from an iFrame Using jQuery?

Creating a Vue Directive in the form of an ES6 class: A step-by-step

Emulating Data in Angular 2 Using Configuration Similar to Ember Mirage

Optimizing shadow rendering in Three.js for top-notch performance

JavaScript checking the current page's URL is crucial for maintaining accurate and dynamic

Attempting to download an image through an axios fetch call

What is the procedure for obtaining an Observable for an Event?

Error loading .OBJ files in Three.js on Azure, but works fine locally

How can JavaScript Regular Expressions be used for Form Validation?

I possess a primary menu with several submenus, yet I am encountering difficulty accessing the submenus. My goal is to efficiently navigate and access the appropriate submenu within the main menu