Is there any recommended way to enhance action annotation?

[TotooriaHyperion]

What I want is to simplify code like this:

// current
class Example {
  constructor() {
    makeObservable(this, {
      _doSomething: action.bound,
    })
  }
  _doSomething() {}
  doSomething = (...args) => {
    let result;
    // do something else(before) - a global configured behavior for debug or some other reason.
    result = this._doSomething(...args);
    // do something else(after)
    return result;
  }
  // and many actions.
}
// expected
const higherOrderAnnotation = action.bound.intercept({
  before: () => {},
  after: () => {},
}); // or if there already has a simple pattern to solve this?
class Example2 {
  constructor() {
    makeObservable(this, {
      _doSomething: higherOrderAnnotation,
    })
  }
  doSomething() {}
}

[urugator]

No and there is no plan to provide this, at least until decorators are standardized. Possible alternatives:

• spy
• composition: this.action = intercept(this.action);
• proxies

[urugator]

generic/standard way to do

The most powerful and generic way is function composition. The problem here is the class syntax that makes it unnecessarily complicated, therefore the need for decorators.

[TotooriaHyperion]

generic/standard way to do

The most powerful and generic way is function composition. The problem here is the class syntax that makes it unnecessarily complicated, therefore the need for decorators.

Why not provide a composition standard?
For example:

import { createAction } from 'mobx';
const customAction = createAction(fn => intercept(fn));

So we don't need check every annotation like:

const inst = { a: () => {}, b: 1, c: () => {}, d: () => {}};
inst.a = intercept(inst.a);
inst.c = intercept(inst.c); // every method should be intercepted and makeObservable with an action annotation.
makeObservable(inst, {
  a: action,
  b: observable.ref,
  c: action,
  d: action, // oops, I forget to intercept d
})

I mean, function composition can be a part of action annotation standard.

[kubk]

@TotooriaHyperion Can you describe what are you trying to achieve? As @urugator already said there is spy to listen for all the actions. If you need it for logging / debugging purpose there is a logger to help debugging Mobx apps.

[TotooriaHyperion]

@TotooriaHyperion Can you describe what are you trying to achieve? As @urugator already said there is spy to listen for all the actions. If you need it for logging / debugging purpose there is a logger to help debugging Mobx apps.

Ok, I'm trying to do two things.

1. To add a context on every action, so that I can decouple what user want to do from what effect should be.
2. To link a sequence of async actions to the source action of them, so that I can distinguish the different source.(Actually a simplified version of zone.js)

That means, I'm not spying on it, but prepare(a new) or auto inherit(an exist) EventContext at the beginning of every action.

// example of 1, and the implementation of 2 is complex but basically follow this pattern with some helper function.
let isUserInput = false;
const userInputInterceptor = {
  before: () => { isUserInput = true; },
  after: () => { isUserInput = false; },
}
function createUserInputAction(fn) {
  return (...args) => {
    userInputInterceptor.before();
    fn(...args);
    userInputInterceptor.after();
  }
}
class Model {
  country = '';
  state = '';
  constructor() {
    makeObservable(this, {
      state: observable.ref,
      country: observable.ref,
      onChangeCountry: action,
      onChangeState: action,
      reset: action,

      // possible API:
      // onChangeCountry: action.intercept(userInputInterceptor, ...otherInterceptors),
      // so I don't need this.onChangeCountry = create......
    });
    this.onChangeCountry = createUserInputAction(this.onChangeCountry); // function composition can solve the problem
    // spy and logger can solve logging/debugging, but not the customized behavior.
  }
  // <Select onChange={model.onChangeCountry} options={countries} />
  onChangeCountry(v) {
      this.country = v;
  }
  // <Select onChange={model.onChangeState} options={model.stateSource.data} loading={model.stateSource.loading} />
  onChangeState(v) {
      this.state = v;
  }
  // <Button onClick={model.reset}>Reset</Button>
  reset({ country, state }) {
    this.country = country; // won't trigger auto select
    this.state = state;
  }
  statesSource = new StateSource(); // this datasource is shared in many other parts of the model, there I only wrote the simplest part.
  bootstrap = () => {
    // This reaction is a replacement of React's useEffect.
    // To move the stateSource from view to model, because it's shared in many parts of both model and views.
    return reaction(() => this.country, (v) => {
      const autoSelectFirst = isUserInput;
      statesSource.fetch(v).then(()=> {
        if (autoSelectFirst) {
          this.state = this.statesSource.data[0];
          // If there are other actions/reactions to be called/triggered, it can inherit the event context, in this example, isUserInput.
        }
      });
    }, { fireImmediately: true });
  }
}

interface IStateSource {
  data: string[] = [];
  loading: boolean = false;
  error: Error | null = null;
  fetch: (country: string) => Promise<string[]>; // inside already updates data/loading/error
}
// data, loading, error are observable.ref
class StateSource implements IStateSource { .... }

In general, reactions in an action are treat as [the IO Effect] of [the event which triggered that action].

[urugator]

Why not provide a composition standard?

Because Mobx doesn't aim to provide generic AOP solution (like decorators do). Our concern is providing tools that can turn standard JS objects into their observable counterparts. You can build whatever you want on the top of it. Eg. you can itroduce your own makeObservable that delegates to ours or to come up with own observable object impl.

Btw the interceptor can already turn the function into action, no need to annotate the member again.