mobx - Cascading actions not rendering -

i'm doing this:

import { observable, action } 'mobx';  export default class datastore {   @observable pagedata:object    @action fetch() {     superagent.get(url1)     .send('got url 1', action((err, results) => {       if (err)         return;       this.pagedata = this.pagedata || {};       this.pagedata.urldata1 = results;       this.fetchanother();     }));   }    @action fetchanother() {     superagent.get(url2)     .send('got url 2', action((err, results) => {       if (err)         return;       this.pagedata = this.pagedata || {};       this.pagedata.urldata2 = results;     }));   } } 

these actions separate because fetchanother called itself.

i inject store react component class. when fetch called, first async callback wrapped in action updates page, , urldata1 rendered. 2nd callback in fetchanother called , executes, not render, , urldata2 show if force re-render in other way. why, , how can fix that?

mobx doesn't support dynamically adding fields plain objects. either use observable map or initialize fields upfront:

pagedata = { urldata1: null, urldata2: null }