Is it appropriate to wrap functions that don't mutate observables with the action

[Brandon-Ln]

I've been using Mobx in my business projects recently, but I've encountered some questions regarding its usage that I couldn't find answers to in the official documentation. Perhaps the helpful community members can help.

Background

I have enabled the following configuration options in the project, much like React's StrictMode, to ensure that my usage of Mobx is conventional and correct.

configure({
  observableRequiresReaction: true,
  // ...
});

My store currently looks like this, it keeps observable states and handles the aggregation of some business logic involving interactions with the server(For clarity, I have simplified the following code):

class CounterStore {
  constructor() {
    this.counter = 0;

    makeObservable(this, {
      counter: observable,
      increment: action,
    });
  }

  increment() {
    this.counter++;
  }

  // ...

  private serializeParams() {
    return JSON.stringify({
      userCounter: this.counter,
      // ...
      // some args are view-unrelated.
    });
  }

  async submit() {
    const params = this.serializeParams();
    await saveServiceApi(params); // interact with server
    // ...
  }
}

My business component looks something like this, very straightforward.

import { observer } from "mobx-react"
import './App.css'
import store from "./store"

function App() {
  const handleClick = () => {
    store.increment() // View updates.
  }

  const handleSubmit = () => {
    store.submit() // Biz logic: gather info and save
  }

  return (
    <>
      <div className="card">
        <button onClick={handleClick}>
          count is {store.counter}
        </button>
        <button onClick={handleSubmit}>
          submit
        </button>
      </div>
    </>
  )
}

const ObservedApp = observer(App)

export default ObservedApp

Then I found the Mobx warning in the console: "Observable being read outside a reactive context" which is caused by the submit method since it reads an observable in an event handler that is definitely not a reactive context.

Confusion

After browsing through some solutions, simply disabling observableRequiresReaction in my case doesn't seem like a good choice. The remaining straightforward solution that comes to mind is to use wrapping methods like runInAction:

  // ...

  async submit() {
    const params = runInAction(() => this.serializeParams());
    await saveServiceApi(params);
    // ...
  }

But I also found some statements in the Mobx official documentation:

An action is any piece of code that modifies the state.
Action: Use on functions that intend to modify the state.
An action is any piece of code that modifies the state.

So in this use-case, I'm a bit puzzled about my usage of action. Because in this context of thesubmit method, I'm not modifying any observable state; I'm just reading fields like a regular object. Therefore, using action here to suppress Mobx warnings, could it be considered misuse or potentially lead to some unexpected side effects or behaviors?

If I miss something, I'd also like to know what the recommended practice should be🤔

It would be much appreciated if someone could address my confusion👋

[urugator]

Basically everything should be either action or computed. computed must be pure function, so everything else is action.

class CounterStore {
  constructor() {
    this.counter = 0;

    makeObservable(this, {
      counter: observable,
      increment: action,
      submit: action, // <--
    });
  }
  /*....*/
  async submit() {
    //  this already runs in action, no need for extra `runInAction` before first await, but also no harm in using it
    const params = this.serializeParams();
    await saveServiceApi(params); // interact with server
    runInAction(() => {
       // In between awaits the runInAction is required. See `flow` for an alternative:
       // https://mobx.js.org/actions.html#using-flow-instead-of-async--await-
    })
  }
}

Conceptually it's related to Command Query Separation

[urugator]

One exception is a pure function that takes arguments. Typically some helper function usable in both writing/reading contexts. That should be neither or computedFn.

[Brandon-Ln]

Thx so much for your great and detailed response!

Basically everything should be either action or computed.

This probably also solves my confusion about why most showcases in official docs use makeAutoObservable instead of explicit makeObservable, and the related link you provide also helps me better understand the design principles and the mental model of Mobx.

For my current use case, my store might have some private methods responsible for purely executing side effects instead of mutating observables, such as synchronizing with external systems. So I may not be entirely sure if these methods can be called action at first, but currently, it seems like the definition of action isn't so strict. And I also noticed that in Vue's reactivity system, the counterpart to Mobx's action concept seems to be named in a broader sense as method.