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 ??

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 ??

• javascript
• reactjs
• redux
• mobx

• Disclaimer: I am author of the repository github.com/rwieruch/react-mobx-soundcloud, but maybe the minimal boilerplate folder structure for a real world application gives you some more insights how an application can get structured. – Robin Wieruch Commented Aug 6, 2016 at 10:49
• A bigger real world MobX App: github.com/rwieruch/favesound-mobx – Robin Wieruch Commented Aug 27, 2016 at 19:02

3 Answers 3

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

As you probably already have noticed, MobX doesn't prescribe how to structure stores, so there are many approaches possible.

But personally I would set up roughly in this way indeed (its similar to the proposed store setup in the docs). It's maybe a bit old-fashioned but it is easy to follow imho, it's a scalable model with clear separation of concerns. Alternative approaches can be found in this example repo or in related projects like mobx-reactor

Small tip: in your api callback use transaction so that all changes are applied at once before any observers are notified.

Mobx itself has some official doc describing their thoughts about structures.

This section contains some of the best practices for building large scale maintainable projects we discovered at Mendix while working with MobX. This section is opinionated and you are in no way forced to apply these practices. There are many ways of working with MobX and React, and this is just one of them.

Read the article here: https://mobx.js.org/defining-data-stores.html