Mobx-state-tree: What are the transaction boundaries in mobx-state-tree?

Created on 3 Oct 2018 · 3Comments · Source: mobxjs/mobx-state-tree

I have:

[ X] A conceptual question.
- [X ] I've checked documentation and searched for existing issues
- [ X] I tried the spectrum channel first
[ ] I think something is not working as it should.
- [ ] I've checked documentation and searched for existing issues
- [ ] I've made sure your project is based on the latest MST version
- [ ] Fork this code sandbox or another minimal reproduction.
- [ ] Describe expected behavior
- [ ] Describe observed behavior
[ ] Feature request
- [ ] Describe the feature and why you feel your feature needs to be generically solved inside MST
- [ ] Are you willing to (attempt) a PR?

specifically i'm interested in whether actions (async ones if that makes any difference) are atomic.
meaning - should i expect a single onSnapshot callback after i execute such an action?
couldn't find any specifics about it in the documentation.

question

Source

lidermanrony

Most helpful comment

sync actions are atomic

async actions are partially atomic (atomic between yields), e.g. see https://codesandbox.io/s/8l1n2l8qxj

so if you have

someFlow: flow(function*() {
      self.title = "title part 1";
      yield new Promise(r => setTimeout(r, 1000));
      self.title += " and part 2";
    })

it will generate two snapshots, one with title "title part 1" and then another with "title part 1 and part 2"

this is basically because the code above is roughly equivalent to:

someFlow: async () => {
      runInAction(() => {
        self.title = "title part 1";
      });

      await new Promise(r => setTimeout(r, 1000));

      runInAction(() => {
        self.title += " and part 2";
      });
    })

xaviergonz on 9 Oct 2018

👍5

All 3 comments

sync actions are atomic

async actions are partially atomic (atomic between yields), e.g. see https://codesandbox.io/s/8l1n2l8qxj

so if you have

someFlow: flow(function*() {
      self.title = "title part 1";
      yield new Promise(r => setTimeout(r, 1000));
      self.title += " and part 2";
    })

it will generate two snapshots, one with title "title part 1" and then another with "title part 1 and part 2"

this is basically because the code above is roughly equivalent to:

someFlow: async () => {
      runInAction(() => {
        self.title = "title part 1";
      });

      await new Promise(r => setTimeout(r, 1000));

      runInAction(() => {
        self.title += " and part 2";
      });
    })

xaviergonz on 9 Oct 2018

👍5

that being said there is an atomic middleware in mst-middlewares to rollback any changes if an async action throws

xaviergonz on 11 Oct 2018

async and sync actions sorry

xaviergonz on 11 Oct 2018

Was this page helpful?

0 / 5 - 0 ratings