How to use yield for non-async function with callback?

[Tj3n]

Hi, I'm having a case where I tried to use Firestore realtime listener inside an action, while this works, I have to create extra actions to update back into my model, is there anyway to handle this more elegantly? Thanks in advanced.

Here's some code for inspection:
In firebase.js:

export function subscribeUserProfile(
  uid: string,
  handler: (data?: UserProfile, error?: Error) => void,
) {
  const unsubscribe = db.userProfilesCollection
    .doc(uid)
    .withConverter(userProfileConverter)
    .onSnapshot(
      (doc) => {
        handler(doc.data(), null)
      },
      (error) => {
        handler(null, error)
      },
    )
  return unsubscribe
}

In UserStore's action:

subscribeExtraInfo: () => {
      const unsubscribe = subscribeUserProfile(self.authInfo.uid, (data, error) => {
        if (error) {
          console.log(error)
        }
        if (data) {
          self.updateExtraInfo(data) //< How can I directly update the data here instead of using another action?
        }
      })
      return unsubscribe
    },

[EmilTholin]

Hi @Tj3n!

Have you looked into runInAction? It might fit your use case nicely.

subscribeExtraInfo: () => {
  const unsubscribe = subscribeUserProfile(self.authInfo.uid, (data, error) => {
    if (error) {
      console.log(error);
    }
    if (data) {
      runInAction(() => {
        // Do the logic in self.updateExtraInfo directly inline here instead.
      });
    }
  });
  return unsubscribe;
}

[Tj3n]

Thanks! That looks very nice!
Checking it now and will report back!

[Tj3n]

@EmilTholin This is weird, I still getting this error Error: [mobx-state-tree] Cannot modify 'UserStore@/userStore', the object is protected and can only be modified by using an action. when I try to replace my code with the runInAction, the error appear immediately once I reload, do you have idea why this happening? Thanks.

Edit: Also, your reply does makes a great idea of creating action :D I can make my own runInAction boilerplate and it run fine, just not sure why the one from mobx doesn't works.

[EmilTholin]

Ah, shoot. I have admittedly never used runInAction with MST myself, I assumed wrongly that it would work.

Like you said, and like Michel says here, you could create your own MST runInAction action that you could even break out and extend models with where needed.

import { types } from "mobx-state-tree";

// An extension we can use to extend models with a runInAction action
const withRunInAction = () => ({
  actions: {
    runInAction(fn) {
      return fn();
    }
  }
});

const MyModel = types
  .model("MyModel", { foo: "foo" })
  // Here we extend the model
  .extend(withRunInAction)
  .actions((self) => ({
    setFoo() {
      setTimeout(() => {
        self.runInAction(() => {
          self.foo = "bar";
        });
      }, 1000);
    }
  }));

const myModel = MyModel.create();

myModel.setFoo();