How to structure mobx

Question

I'm trying to figure out how to structure my app, for example, I have a model User, a generic UserStore to keep track all users load so far and some UI related stores like FriendList, PendingFriendList, BlockedUserList, LikedUserList, etc. like that:

class User {
  id;
  @observable name;
  @observable avatar;
  // others functions and fields
}

class UserStore {
  @observable users = [];
  function resolve(id) { /*return by id*/}
  function createOrUpdateUser(json) { /* add user to this.users */ }
}

class FriendStore {
  @observable users = [];
  hasNextPage = true;
  currentPage = null;

  function loadNextPage(page) {
    api.loadFriends(page >= 0 ? page : this.currentPage + 1).then( users => {
      users.forEach( user => {
        this.users.push( UserStore.createOrUpdateUser(user) )
      })
    })
  }
}

class PendingFriendUsers {
  @observable users = [];
  @observable query = null;
  hasNextPage = true;
  currentPage = null;

  function loadNextPage(page) {
    // more or less like FriendStore
  }
}

class BlockedUserStore {
  // more or less like FriendStore
}

My question is: Is that the way to go? Or is there a better way ??

Answer 1

I've worked on some projects with Mobx & react, so I found this structure best suitable for me.

Stores

• Domain Stores
  • stores the data which'll be needed in your app.
    for ex. user data
• View Stores
  • stores the data which'll be needed to present your app
    for ex. loading, error variables

Models

• Here you can define the data models
  for ex- user model

Services

• Here you can make services, api calls

Components

• Container or Smart Component
• Dumb or presentational component