Cancel actions in async function if observables change?

[inf3rnus]

Hey!

Hoping someone has a more elegant solution to this than what I'm doing... I'm trying to think of a better way to do it, and I'm not sure if mobx has a built in way of handling this.

What I'm trying to do:

I've got a reaction that reacts to an observable, let's just call it url, when url changes, this sets off a promise chain that has several steps in it that will call actions at each step in the chain. Each step in this chain could take a different amount of time.

The problem with this is if url changes, then you can end up with inconsistent state w/ respect to your store, because the expectation is for the entire promise chain to go fully to completion or not perform actions, as the actions are specific to the URL.

You also cannot wait for the promise chain to complete before performing the next promise chain. As the user needs the store to update immediately to the next promise chain that's being invoked.

So, what I'm doing is keeping a timestamp that's specific to each invocation of the promise chain and then storing it globally. I've then created a wrapper function that checks the timestamp that's specific to the promise chain, and what the global timestamp is. If they match, then the action is performed, if they don't, then it does not perform the action.

Curious if anyone has seen this before, or has a more elegant approach? It'd be nice if it was possible to cancel all actions within the context of a particular promise chain w/ some built in functionality.

[TotooriaHyperion]

1. MobX don't know the relationship between multiple asynchronous actions, unless you change the promise chain to a generator function and use MobX flow to wrap it in.
2. However, MobX flow has no business meaning, it's only a tool to automaticly wrap [async code blocks written in generators with yield keyword] into actions.
3. In the official doc, MobX don't recommend using reaction too much: https://mobx.js.org/reactions.html#use-reactions-sparingly
4. Your requirement is exactly what Rxjs's switchMap operator do: when source emits, all the previous subscriptions are cancelled, and new subscriptions are established.

What you described is not to "cancel actions" but rather to "cancel a series of promises(or async code blocks if written with async/await syntax sugar) where those actions are in".

Since you want an elegant solution, this is not what mobx cares about, but what Rxjs is for. The most common universal solution of cancelling a series of async behaviors is Rxjs's observable pattern.

[inf3rnus]

Thanks Elaina, that's all really good info! I'll check out Rxjs.

Very appreciative,
Aaron

[suyingtao]

Hey @inf3rnus !
I have the same problem as you. Do you find an elegant soulution to resolve it in MobX?

[inf3rnus]

Hey!

The solution I came up with was to do the following:

1 - For the reaction you're listening to, keep a nonce. (Think like a timestamp or a ticker variable that counts up by one every time you want to determine if something should be updated.)

2 - In your promise chain, keep track of the value of the nonce in the scope of the promise chain so you have a copy of the nonce at that moment in time. (You may already be aware but in case you aren't or other readers aren't, async function = syntactic sugar for a promise chain.)

3 - For every action, only perform the action if the locally scoped nonce in the promise chain is the same as what's in the store for the nonce.

4 - Store will only commit the execution of an action if by the time the action is being executed, the nonce has not changed.

Some code to help describe what I mean...

import { reaction, makeAutoObservable } from 'mobx';

class SomeMobxStore {
  constructor() {
    this.nonce = 0;
    makeAutoObservable(this);

    reaction(
      url => url,
      async url => {
        // anytime this reaction is called, the nonce updates
        this.nonce++;
        // we save off a local copy of the nonce within the scope of this async func
        // to allow for us to determine whether an action should be performed or should not be performed
        // the action will only be performed if the nonce has not changed globally by the time we get to attempting
        // to "commit" the action
        const localNonce = this.nonce;

        const json = await fetch(url).then(res => res.json());

        // will only run the action if the local copy of the nonce matches the global version
        // imagine this reaction occurs 20 times in a row, and each network call can take between 3 - 5 seconds.
        // without the nonce, we will see the store update everytime in no guaranteed order, which could result in an inconsistent UX experience for the user 
        // we only want the most recent reaction's promise chain to go to completion, and that's what the nonce allows for
        this.nonceChecker(localNonce, () =>
          this.someAction(json.somePropFromNetworkCall)
        );
      }
    );
  }

  // Generalized wrapper for checking the nonce, passing whatever action you want 
  nonceChecker = (nonce, callback) => {
    if (this.nonce === nonce) {
      callback();
    }
  };

  someAction = someObservable => {
    this.someObservable = someObservable;
  };
}

Also, this exact code hasn't been tested, but should work.

Sidenote, there are other libraries out there worth looking into that allow you to "expire" a promise in a similar way, the problem is that they only work on one promise at a time, so if you have an async function with multiple awaits, you need to wrap every promise (every function called with await) w/ the expiration functions and then modify your block of code to conform to the signature of whatever api those libraries provide so that your promise chain can short circuit execution before executing a mobx action. Still look them up though, because it's been a while since I've looked at them, and my understanding of them could be flawed.

The difference between what you see above and some of those other libraries is that, you only need to wrap your mobx actions in the nonceChecker.

Also, useful info, afaik, js does not support the ability to truly cancel a promise. The only promise that can be truly cancelled is fetch() w/ the AbortController API (I think.). Once a promise has been put into the microtask queue (for all intents and purposes, if you're not familiar with it, it's just a substructure of the event loop, so think event loop), the JS engine will execute whatever block of code belongs to that promise. Just something to be mindful of, because you're still queuing up work that will run on the CPU, it's just that you are determining whether or not you want to use the result of that work to update your application state.

Final thing, there is a way to setup your function as an async generator so that you can prevent queuing up more promises than necessary if you are concerned about the performance implications. These work by executing the promise chain one step at a time and then evaluating if the next step should be executed within the body of a *for await... of * statement... I think mobx has a way of allowing you to create one of these right off the bat with the flow() wrapper, but I never got around to seeing if it works with the aforementioned nonce based action commitment model. You might not be able to insert your own logic into the body of the *for await... of * statement presumably used by flow(). (I do not know what the code that drives that actually looks like, so take that with a grain of salt, you might be able to.)

For more info on flow(): https://mobx.js.org/actions.html#using-flow-instead-of-async--await-

I had problems trying to get flow to work, so went with a vanilla async generator, but due to poor flexibility, ultimately went back to the implementation you see above.

[suyingtao]

I'm sorry I just saw your reply.
Good idea and explain in great detail! 💯
Thanks a lot