[Question] - Should log all state changes log size increase by length of json?

[johnstew]

I'm not sure if this is me doing it or if this something that is supposed to happen. But I have an async action and I'm using runInAction to help resolve.

It looks like this:

@action
  async getLogs() {
    try {
      const logSnap = await db.collection('logs').get();
      const logs: Array<Log> = [];

      logSnap.forEach((doc) => {
        const data = doc.data();
        const log: Log = {
          contents: data.contents,
          createdAt: data.createdAt,
          updatedAt: data.updatedAt,
          tags: data.tags,
          id: doc.id
        };
        logs.push(log);
      });

      runInAction('getLogsSuccess', () => {
        this.toast = 'Logs Retrieved';
        this.logs = logs;
      });
    } catch (error) {
      console.error(error);
      runInAction('getLogsError', () => {
        this.toast = 'Error saving log';
      });
    }
  }

In a React component I call it like this:

class MyComponent extends Component {
    componentDidMount() {
        appState.getLogs();
    }
}

In the console I then get a couple hundred messages grouped under the getLogsSuccess action. Each one of these messages looks like it corresponds to each part of the JSON. So as the JSON payload gets larger the number of console messages grow. Is this by design or am I not using mobx properly?

[mweststrate]

Could you include a screenshot describing what kind of log messages you get / wouldn't expect? You might get a message for each entry as part of a 'reaction' for example, if each entry is rendered by a React component

On Sun, Feb 10, 2019 at 6:18 PM John Stewart notifications@github.com wrote:

I'm not sure if this is me doing it or if this something that is supposed to happen. But I have an async action and I'm using runInAction to help resolve.

It looks like this:

@action async getLogs() { try { const logSnap = await db.collection('logs').get(); const logs: Array = [];

  logSnap.forEach((doc) => {
    const data = doc.data();
    const log: Log = {
      contents: data.contents,
      createdAt: data.createdAt,
      updatedAt: data.updatedAt,
      tags: data.tags,
      id: doc.id
    };
    logs.push(log);
  });

  runInAction('getLogsSuccess', () => {
    this.toast = 'Logs Retrieved';
    this.logs = logs;
  });
} catch (error) {
  console.error(error);
  runInAction('getLogsError', () => {
    this.toast = 'Error saving log';
  });
}

}

In a React component I call it like this:

class MyComponent extends Component { componentDidMount() { appState.getLogs(); } }

In the console I then get a couple hundred messages grouped under the getLogsSuccess action. Each one of these messages looks like it corresponds to each part of the JSON. So as the JSON payload gets larger the number of console messages grow. Is this by design or am I not using mobx properly?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx-react-devtools/issues/107, or mute the thread https://github.com/notifications/unsubscribe-auth/ABvGhBYCLs960IL7S8hTFd8StOtoAtMfks5vMFRqgaJpZM4azKbq .

[johnstew]

The getLogsSuccess call receives a pretty big JSON payload that will keep getting bigger over time.

I think it makes sense why this is happening. It's all grouped under the one action getLogsSuccess but it's setting each part of the payload and that is being logged.

Initially, I was worried that I was doing something wrong but when I drill down into each set I can see the newValue that is being set. I guess I was more expecting a before and after of the entire observer property it is setting instead of each individual property.

Again, just a question. Just wanted to make sure I wasn't abusing mobx or using it incorrectly.

[mweststrate]

@johnstew If they are nested under the action than everything is correct indeed. observable will recurse over the fresh data structure and initializate all the observable fields. So this is as expected :smile: